import PrimaryButton from '@/Components/PrimaryButton';
import TextInput from '@/Components/TextInput';
import GuestLayout from '@/Layouts/GuestLayout';
import { t } from '@/lib/utils';
import { Head, useForm } from '@inertiajs/react';
import { Loader2 } from 'lucide-react';
import { FormEventHandler } from 'react';

export default function ForgotPassword({ status }: { status?: string }) {
    const { data, setData, post, processing, errors } = useForm({
        email: '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();

        post(route('password.email'));
    };

    return (
        <GuestLayout backLink={route('login')}>
            <Head title={t('Forgot Password')} />

            <div className="mb-12 text-center">
                <h1 className="scroll-m-20 text-4xl font-semibold tracking-tight lg:text-5xl">
                    Recupera password
                </h1>
            </div>

            <div className="mb-12 text-sm text-gray-600">
                Hai dimenticato la password? Nessun problema. Facci sapere il
                tuo indirizzo email e ti invieremo un link che ti permetterà di
                sceglierne una nuova.
            </div>

            {status && (
                <div className="mb-4 text-sm font-medium text-green-600">
                    {t(status)}
                </div>
            )}

            <form onSubmit={submit}>
                <TextInput
                    error={errors.email}
                    id="email"
                    name="email"
                    value={data.email}
                    className="mt-1 block w-full"
                    isFocused={true}
                    onChange={(e) => setData('email', e.target.value)}
                />

                <div className="mt-20 flex items-center justify-center">
                    <PrimaryButton className="ms-4 px-10" disabled={processing}>
                        {processing ? (
                            <Loader2 className="animate-spin" />
                        ) : null}
                        {t('Send link')}
                    </PrimaryButton>
                </div>
            </form>
        </GuestLayout>
    );
}
