import Button from '@/Components/UI/Button';
import AuthLayout from '@/Layouts/AuthLayout';
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 (
        <AuthLayout title="Verify Your Email" subtitle="One more step before you can access your account.">
            <Head title="Email Verification" />

            <p className="text-body-md text-on-surface-variant">
                Thanks for signing up! Before getting started, could you verify your email address by clicking on
                the link we just emailed to you? If you didn't receive the email, we will gladly send you another.
            </p>

            {status === 'verification-link-sent' && (
                <div className="mt-4 rounded bg-status-published/10 px-4 py-2 text-sm font-medium text-status-published">
                    A new verification link has been sent to the email address you provided during registration.
                </div>
            )}

            <form onSubmit={submit} className="mt-6 flex items-center justify-between">
                <Button type="submit" variant="primary" disabled={processing}>
                    Resend Verification Email
                </Button>

                <Link href={route('logout')} method="post" as="button" className="text-sm text-on-surface-variant hover:underline">
                    Log Out
                </Link>
            </form>
        </AuthLayout>
    );
}
