"use client";

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

export function LoginForm({ da }: { da: string }) {
  const [state, action, pending] = useActionState(login, undefined);
  return (
    <form action={action} className="flex flex-col gap-4">
      <input type="hidden" name="da" value={da} />
      <label className="flex flex-col gap-1.5">
        <span className="text-sm font-bold">Nome utente</span>
        <input
          id="user"
          name="user"
          autoComplete="username"
          autoCapitalize="none"
          required
          className="rounded-field border-2 border-line bg-surface px-4 py-3 text-base font-semibold"
        />
      </label>
      <label className="flex flex-col gap-1.5">
        <span className="text-sm font-bold">Password</span>
        <input
          id="password"
          name="password"
          type="password"
          autoComplete="current-password"
          required
          className="rounded-field border-2 border-line bg-surface px-4 py-3 text-base font-semibold"
        />
      </label>
      {state?.error && (
        <p role="alert" className="rounded-field bg-all-soft px-4 py-3 text-sm font-medium text-all-ink">
          {state.error}
        </p>
      )}
      <button
        type="submit"
        disabled={pending}
        className="mt-2 rounded-field bg-accent px-4 py-4 text-base font-extrabold text-accent-ink shadow-[0_3px_0_rgba(28,42,82,0.25)] disabled:opacity-60"
      >
        {pending ? "Un attimo…" : "Entra"}
      </button>
    </form>
  );
}