"use client";

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

export function ForgotPasswordForm() {
  const [state, formAction, pending] = useActionState<ActionState, FormData>(forgotPassword, 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 />

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

      <Button type="submit" disabled={pending} className="mt-1 w-full">
        {pending ? "Gönderiliyor..." : "Sıfırlama Bağlantısı Gönder"}
      </Button>
    </form>
  );
}