import { Link, 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 ForgotPassword({ status }: { status?: string }) {
    const form = useForm({ email: '' });
    return (
        <AuthLayout title="Reset your password" subtitle="We'll email you a link to choose a new password.">
            {status && <p className="mb-4 text-sm text-success" role="status">{status}</p>}
            <form onSubmit={(e) => { e.preventDefault(); form.post('/forgot-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 autoFocus />
                </Field>
                <Button type="submit" className="w-full" disabled={form.processing}>Email reset link</Button>
            </form>
            <p className="mt-4 text-sm"><Link href="/login" className="link">Back to sign in</Link></p>
        </AuthLayout>
    );
}