"use client";

import { useActionState } from "react";
import Link from "next/link";
import { login, type ActionState } from "@/lib/auth/actions";
import { TextField } from "@/components/ui/Field";
import { Button } from "@/components/ui/Button";

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

  return (
    <form action={formAction} className="flex flex-col gap-4">
      <TextField label="E-posta Adresi" name="email" type="email" placeholder="ornek@eposta.com" error={state?.errors?.email} required />
      <TextField label="Şifre" name="password" type="password" placeholder="••••••••" error={state?.errors?.password} required />

      {state?.message && <p className="text-[13px] text-accent">{state.message}</p>}

      <Button type="submit" disabled={pending} className="mt-1 w-full">
        {pending ? "Giriş yapılıyor..." : "Giriş Yap"}
      </Button>

      <div className="flex flex-col items-center gap-2 pt-1 text-[13px]">
        <p className="text-text-muted">
          Hesabın yok mu?{" "}
          <Link href="/kayit" className="font-semibold text-accent">
            Ücretsiz Üye Ol
          </Link>
        </p>
        <Link href="/sifre-sifirla" className="font-semibold text-text-muted hover:text-accent">
          Şifremi Unuttum
        </Link>
      </div>
    </form>
  );
}