"use client";

import { useActionState } from "react";
import { loginAction, type LoginFormState } from "@/lib/actions/auth";
import { Button } from "@/components/ui/Button";

const initialState: LoginFormState = {};

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

  return (
    <form action={formAction} className="mt-6 flex flex-col gap-4">
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
          Email
        </label>
        <input
          name="email"
          type="email"
          required
          autoComplete="username"
          className="rounded-xl border border-charcoal-950/15 px-4 py-2.5 text-sm focus:border-gold-500 focus:outline-none"
        />
      </div>
      <div className="flex flex-col gap-1.5">
        <label className="text-xs font-semibold uppercase tracking-wide text-charcoal-400">
          Password
        </label>
        <input
          name="password"
          type="password"
          required
          autoComplete="current-password"
          className="rounded-xl border border-charcoal-950/15 px-4 py-2.5 text-sm focus:border-gold-500 focus:outline-none"
        />
      </div>
      {state.error ? <p className="text-sm text-red-600">{state.error}</p> : null}
      <Button type="submit" disabled={pending} className="mt-2 w-full">
        {pending ? "Signing in..." : "Sign In"}
      </Button>
    </form>
  );
}