'use client';

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

export function LoginForm({ next }: { next: string }) {
  const [state, action] = useActionState(loginAction, idle);
  return (
    <form action={action} className="mt-6 space-y-4" noValidate>
      <input type="hidden" name="next" value={next} />
      <FormMessage state={state} />
      <Field label="E-mail" name="email" error={state.fieldErrors?.email}>
        <TextInput name="email" type="email" autoComplete="email" required autoFocus placeholder="you@example.com" invalid={Boolean(state.fieldErrors?.email)} />
      </Field>
      <PasswordField name="password" autoComplete="current-password" showMeter={false} error={state.fieldErrors?.password} />
      <div className="flex items-center justify-between">
        <span />
        <Link href="/forgot" className="text-xs font-medium text-muted hover:text-fg">
          Forgot password?
        </Link>
      </div>
      <SubmitButton className="w-full" pendingText="Signing in…">
        Continue
      </SubmitButton>
    </form>
  );
}