import { useState } from 'react';
import axios from '../services/api';

function Md5Tool() {
  const [input, setInput] = useState('');
  const [result, setResult] = useState('');

  const hashPassword = async () => {
    try {
      const res = await axios.post('/api/hash/md5', { password: input });

      setResult(res.data.md5);
    } catch (err) {
      alert('Fehler beim Hashen');
    }
  };

  return (
    <div className="main-content">
      <h2>MD5 Hasher</h2>
      <p style={{ color: '#e07b00', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
        <strong>Sicherheitshinweis:</strong> MD5 ist kryptografisch unsicher und darf
        nicht zum Hashen von Passwörtern verwendet werden. Für Passwörter bitte
        bcrypt, Argon2 oder scrypt einsetzen.
      </p>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Eingabe"
      />
      <button onClick={hashPassword}>Hash berechnen</button>
      {result && <p><strong>MD5:</strong> {result}</p>}
    </div>
  );
}

export default Md5Tool;