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

export default function VerifyEmail({ status }: { status?: string }) {
    const { post, processing } = useForm({});

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

        post(route('verification.send'));
    };

    return (
        <GuestLayout>
            <Head title={t('Email verification')} />

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

            <div className="mb-4 text-sm text-gray-600">
                Prima di iniziare, abbiamo bisogno di verificare che tu abbia
                accesso all'indirizzo email che ci hai fornito.
            </div>
            <div className="mb-4 text-sm text-gray-600">
                Per fare ciò basta che clicchi sul link che ti abbiamo inviato.
            </div>
            <div className="mb-4 text-sm text-gray-600">
                Non hai ricevuto l'email? Possiamo inviartene un'altra senza
                problemi.
            </div>

            {status === 'verification-link-sent' && (
                <div className="mb-4 text-sm font-medium text-green-600">
                    Ti abbiamo inviato un nuovo link di verifica all'indirizzo
                    email che ci hai fornito.
                </div>
            )}

            <form onSubmit={submit}>
                <div className="mt-12 flex items-center justify-between">
                    <PrimaryButton disabled={processing}>
                        Invia di nuovo il link
                    </PrimaryButton>

                    <Link
                        href={route('logout')}
                        method="post"
                        as="button"
                        className="focus:ring-indigo-500 rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2"
                    >
                        Logout
                    </Link>
                </div>
            </form>
        </GuestLayout>
    );
}
