import { useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Field } from '@/components/ui/label';
import AuthLayout from '@/layouts/AuthLayout';

export default function ResetPassword({ token, email }: { token: string; email: string }) {
    const form = useForm({ token, email: email ?? '', password: '', password_confirmation: '' });
    return (
        <AuthLayout title="Choose a new password">
            <form onSubmit={(e) => { e.preventDefault(); form.post('/reset-password'); }} className="space-y-4">
                <Field label="Email" htmlFor="email" error={form.errors.email}>
                    <Input id="email" type="email" value={form.data.email} onChange={(e) => form.setData('email', e.target.value)} required />
                </Field>
                <Field label="New password" htmlFor="password" error={form.errors.password}>
                    <Input id="password" type="password" autoComplete="new-password" value={form.data.password} onChange={(e) => form.setData('password', e.target.value)} required />
                </Field>
                <Field label="Confirm password" htmlFor="password_confirmation">
                    <Input id="password_confirmation" type="password" autoComplete="new-password" value={form.data.password_confirmation} onChange={(e) => form.setData('password_confirmation', e.target.value)} required />
                </Field>
                <Button type="submit" className="w-full" disabled={form.processing}>Reset password</Button>
            </form>
        </AuthLayout>
    );
}