import type { FormEvent } from 'react';
import { LockKeyhole, Mail } from 'lucide-react';
import { AuthInput } from './AuthInput';

interface LoginViewProps {
  email: string;
  loading: boolean;
  onChangeEmail: (value: string) => void;
  onChangePassword: (value: string) => void;
  onChangeRememberMe: (value: boolean) => void;
  onForgotPassword: () => void;
  onRegister: () => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
  password: string;
  rememberMe: boolean;
}

export function LoginView({
  email,
  loading,
  onChangeEmail,
  onChangePassword,
  onChangeRememberMe,
  onForgotPassword,
  onRegister,
  onSubmit,
  password,
  rememberMe,
}: LoginViewProps) {
  return (
    <div className="auth-view view-enter">
      <div className="auth-head auth-head-center">
        <h1>Velkommen tilbage</h1>
        <p>Indtast dine oplysninger for at logge ind pa din konto.</p>
      </div>

      <form className="auth-form" onSubmit={onSubmit}>
        <AuthInput
          icon={<Mail size={16} strokeWidth={1.8} />}
          label="E-mail"
          type="email"
          placeholder="navn@eksempel.dk"
          value={email}
          onChange={(event) => onChangeEmail(event.target.value)}
          required
        />

        <label className="auth-field">
          <div className="auth-field-row">
            <span>Adgangskode</span>
            <button className="link-btn" type="button" onClick={onForgotPassword}>
              Glemt adgangskode?
            </button>
          </div>
          <div className="auth-input-wrap">
            <span className="auth-input-icon" aria-hidden>
              <LockKeyhole size={16} strokeWidth={1.8} />
            </span>
            <input
              type="password"
              placeholder="••••••••"
              value={password}
              onChange={(event) => onChangePassword(event.target.value)}
              required
            />
          </div>
        </label>

        <label className="check-row">
          <input
            type="checkbox"
            checked={rememberMe}
            onChange={(event) => onChangeRememberMe(event.target.checked)}
          />
          <span>Husk mig i 30 dage</span>
        </label>

        <button className="submit-btn" type="submit" disabled={loading}>
          {loading ? 'Logger ind...' : 'Log ind'}
        </button>
      </form>

      <p className="auth-foot">
        Har du ikke en konto?
        <button className="link-btn" type="button" onClick={onRegister}>
          Opret bruger
        </button>
      </p>
    </div>
  );
}
