import { Button } from '@/Components/ui/button';
import GuestLayout from '@/Layouts/GuestLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { MailCheck } from 'lucide-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 title="Check your inbox" subtitle="We sent a verification link to your email. Verify it to start writing reviews.">
            <Head title="Verify email" />
            <div className="mb-6 flex size-14 items-center justify-center rounded-2xl border border-border bg-accent/60 text-primary">
                <MailCheck className="size-7" />
            </div>
            {status === 'verification-link-sent' && (
                <div role="status" className="mb-5 rounded-lg border border-border bg-accent/60 px-3 py-2.5 text-sm">A fresh verification link is on its way.</div>
            )}
            <form onSubmit={submit} className="space-y-3">
                <Button type="submit" size="lg" className="w-full" loading={processing}>Resend verification email</Button>
                <Link href={route('logout')} method="post" as="button" className="w-full rounded-lg py-2 text-sm text-muted-foreground transition hover:text-foreground">
                    Log out
                </Link>
            </form>
        </GuestLayout>
    );
}
