"use client";

import { useActionState } from "react";
import { seConnecter, type EtatConnexion } from "@/lib/actions/session";

export function FormulaireConnexion() {
  const [etat, action, enCours] = useActionState<EtatConnexion, FormData>(seConnecter, {});
  return (
    <form action={action} className="space-y-4">
      <label className="block text-sm font-medium">
        E-mail
        {/* React réinitialise le formulaire après l'action : on remet l'e-mail saisi. */}
        <input key={etat.email} name="email" type="email" required autoComplete="username" defaultValue={etat.email} className="champ mt-1" />
      </label>
      <label className="block text-sm font-medium">
        Mot de passe
        <input name="motDePasse" type="password" required autoComplete="current-password" className="champ mt-1" />
      </label>
      {etat.erreur && <p className="text-sm text-danger">{etat.erreur}</p>}
      <button disabled={enCours} className="bouton-principal w-full">
        {enCours ? "Connexion…" : "Se connecter"}
      </button>
    </form>
  );
}