'use client';

import Link from 'next/link';
import { useActionState } from 'react';
import { forgotAction } from '@/lib/auth/actions';
import { idle } from '@/lib/auth/state';
import { Field, FormMessage, SubmitButton, TextInput } from '@/components/account/form';

export function ForgotForm() {
  const [state, action] = useActionState(forgotAction, idle);
  return (
    <form action={action} className="mt-6 space-y-4" noValidate>
      <FormMessage state={state} />
      <Field label="E-mail" name="email">
        <TextInput name="email" type="email" autoComplete="email" required autoFocus placeholder="you@example.com" />
      </Field>
      <SubmitButton className="w-full" pendingText="Sending…">
        Send reset code
      </SubmitButton>
      {state.ok ? (
        <p className="text-center text-xs text-muted">
          Got the code?{' '}
          <Link href="/reset" className="font-medium text-fg underline-offset-4 hover:underline">
            Enter it here
          </Link>
        </p>
      ) : null}
    </form>
  );
}