"use client";

import { useActionState } from "react";
import { login, type LoginState } from "@/app/admin/auth-actions";
import { Button, Input } from "@/components/ui";

export function LoginForm() {
  const [state, formAction, pending] = useActionState<LoginState, FormData>(login, {});

  return (
    <form action={formAction} className="space-y-4">
      <label className="block">
        <span className="block text-sm font-medium text-amber-800 mb-1">Senha do organizador</span>
        <Input type="password" name="password" required autoFocus autoComplete="current-password" />
      </label>
      {state.error && (
        <p className="text-sm text-rose-600" role="alert">
          {state.error}
        </p>
      )}
      <Button type="submit" disabled={pending} className="w-full">
        {pending ? "Entrando..." : "Entrar"}
      </Button>
    </form>
  );
}