const LoginView = ({ credentials, onCredentialsChange, error, loading, initializing, onSubmit }) => {
  const handleChange = (field) => (event) => {
    onCredentialsChange({ ...credentials, [field]: event.target.value });
  };

  return (
    <div className="foodsharing-login">
      <form
        className="foodsharing-login__card"
        onSubmit={(event) => {
          if (initializing) {
            event.preventDefault();
            return;
          }
          onSubmit(event);
        }}
      >
        <div>
          <img className="foodsharing-login__logo" src="/branding/logo-horizontal.png" alt="Foodsharing Manager" />
          <h1 className="foodsharing-login__title">Anmelden</h1>
          <p className="foodsharing-login__intro">
            Die Anwendung authentifiziert sich direkt bei foodsharing.de. Bitte verwende deine persönlichen Login-Daten.
          </p>
        </div>

        {error && (
          <div className="foodsharing-login__error">
            <span>{error}</span>
          </div>
        )}

        <div>
          <label className="foodsharing-login__label" htmlFor="email">
            E-Mail
          </label>
          <input
            id="email"
            type="email"
            name="email"
            value={credentials.email}
            onChange={handleChange('email')}
            className="foodsharing-login__input"
            required
          />
        </div>

        <div>
          <label className="foodsharing-login__label" htmlFor="password">
            Passwort
          </label>
          <input
            id="password"
            type="password"
            name="password"
            value={credentials.password}
            onChange={handleChange('password')}
            className="foodsharing-login__input"
            required
          />
        </div>

        <button
          type="submit"
          disabled={loading || initializing}
          className="foodsharing-login__submit"
        >
          {loading || initializing ? 'Anmeldung läuft...' : 'Anmelden'}
        </button>
      </form>
    </div>
  );
};

export default LoginView;