'use client';

import { useActionState } from 'react';
import { resetAction } from '@/lib/auth/actions';
import { idle } from '@/lib/auth/state';
import { CodeInput, Field, FormMessage, PasswordField, SubmitButton, TextInput } from '@/components/account/form';

export function ResetForm({ token }: { token: string }) {
  const [state, action] = useActionState(resetAction, idle);
  return (
    <form action={action} className="mt-6 space-y-4" noValidate>
      <FormMessage state={state} />
      {token ? (
        <input type="hidden" name="t" value={token} />
      ) : (
        <>
          <Field label="E-mail" name="email" error={state.fieldErrors?.email}>
            <TextInput name="email" type="email" autoComplete="email" required />
          </Field>
          <CodeInput name="code" autoSubmit={false} error={state.fieldErrors?.code} label="Reset code" />
        </>
      )}
      <PasswordField name="password" label="New password" autoComplete="new-password" error={state.fieldErrors?.password} />
      <SubmitButton className="w-full" pendingText="Saving…">
        Set new password
      </SubmitButton>
    </form>
  );
}