"use client";

import { useActionState } from "react";
import { useTranslations } from "next-intl";
import { requestPasswordResetAction } from "@/lib/actions/auth";
import { Field, SubmitButton } from "@/components/auth/RegisterForm";

export function ForgotPasswordForm({ locale }: { locale: string }) {
  const t = useTranslations("auth");
  const [state, formAction, pending] = useActionState(requestPasswordResetAction, {});

  if (state.success) {
    return <p className="text-sm text-[var(--rk-ink-muted)] text-center">{t("resetLinkSent")}</p>;
  }

  return (
    <form action={formAction} className="flex flex-col gap-4">
      <input type="hidden" name="locale" value={locale} />
      <Field label={t("emailLabel")} name="email" type="email" autoComplete="email" required />
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      <SubmitButton pending={pending} label={t("sendResetLink")} />
    </form>
  );
}