'use client';

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

export function DeleteAccountForm() {
  const [state, action] = useActionState(deleteAccountAction, idle);
  return (
    <form action={action} className="space-y-3" noValidate>
      <FormMessage state={state} />
      <Field label="Password" name="password">
        <TextInput name="password" type="password" autoComplete="current-password" required />
      </Field>
      <Field label="Type DELETE to confirm" name="confirm">
        <TextInput name="confirm" autoComplete="off" required placeholder="DELETE" />
      </Field>
      <SubmitButton variant="danger" pendingText="Deleting…">
        Delete my account
      </SubmitButton>
    </form>
  );
}