import React, { useState } from 'react';
import './LoginForm.css';

const LoginForm = ({ onLogin, loading }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    if (!username || !password) {
      setError('Bitte füllen Sie alle Felder aus');
      return;
    }

    const result = await onLogin(username, password);
    if (!result.success) {
      setError(result.message || 'Anmeldung fehlgeschlagen');
    }
  };

  return (
    <div className="login-container">
      <div className="login-card">
        <h2>Admin-Anmeldung</h2>
        <form onSubmit={handleSubmit}>
          {error && <div className="login-error">{error}</div>}
          <div className="form-group">
            <label htmlFor="username">Benutzername</label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              disabled={loading}
              required
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">Passwort</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={loading}
              required
            />
          </div>
          <button type="submit" className="login-button" disabled={loading}>
            {loading ? 'Anmelden...' : 'Anmelden'}
          </button>
          <div className="form-footer">
            <a href="/passwort-zuruecksetzen" className="forgot-password-link">
              Passwort vergessen?
            </a>
          </div>
        </form>
      </div>
    </div>
  );
};

export default LoginForm;
