"use client";

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

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

  if (state.success) {
    return (
      <div className="text-center">
        <p className="text-sm text-[var(--rk-ink-muted)]">{t("passwordResetDone")}</p>
        <Link href="/login" className="mt-4 inline-block text-xs underline hover:text-[var(--rk-ink)]">
          {t("loginLink")}
        </Link>
      </div>
    );
  }

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