"use client";

import { useActionState } from "react";
import { login, type LoginState } from "./actions";

const initialState: LoginState = {};

export function LoginForm() {
  const [state, formAction, pending] = useActionState(login, initialState);

  return (
    <form action={formAction} className="loginForm">
      <label htmlFor="email">Adresse e-mail<input id="email" name="email" type="email" autoComplete="username" required autoFocus /></label>
      <label htmlFor="password">Mot de passe<input id="password" name="password" type="password" autoComplete="current-password" required /></label>
      {state.error ? <p className="loginError" role="alert">{state.error}</p> : null}
      <button type="submit" disabled={pending}>{pending ? "Connexion…" : "Se connecter"}</button>
    </form>
  );
}