"use client";

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

export function ResetPasswordForm({ token }: { token: string }) {
  const action = resetPassword.bind(null, token);
  const [state, formAction, pending] = useActionState<ActionState, FormData>(action, undefined);

  return (
    <form action={formAction} className="flex flex-col gap-4">
      <TextField label="Yeni Şifre" name="password" type="password" placeholder="••••••••" error={state?.errors?.password} required />
      <TextField
        label="Yeni Şifre Tekrar"
        name="passwordConfirm"
        type="password"
        placeholder="••••••••"
        error={state?.errors?.passwordConfirm}
        required
      />

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

      <Button type="submit" disabled={pending} className="mt-1 w-full">
        {pending ? "Kaydediliyor..." : "Şifremi Güncelle"}
      </Button>
    </form>
  );
}