'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { resendVerificationEmail, type ResendVerificationState } from '@/app/account/actions';

const initialState: ResendVerificationState = undefined;

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="text-sm font-semibold text-navy-800 underline hover:text-gold-600 disabled:opacity-60"
    >
      {pending ? 'Sending…' : 'Resend verification email'}
    </button>
  );
}

export function ResendVerificationButton() {
  const [state, formAction] = useFormState(resendVerificationEmail, initialState);

  return (
    <form action={formAction} className="mt-2">
      <SubmitButton />
      {state?.message && (
        <p className={`mt-1 text-xs ${state.success ? 'text-green-700' : 'text-red-700'}`}>{state.message}</p>
      )}
    </form>
  );
}