import {Link} from '@inertiajs/react';
import MainLayout from '@/layouts/MainLayout';
import AppPageHeader from '@/components/AppPageHeader';

export default function TwoFactorPrompt(): JSX.Element {
    return (
        <MainLayout hideSidebar>
            <AppPageHeader title="Protect your account" subtitle="Security" />

            <section className="max-w-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Add two-factor authentication</h2>
                <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
                    Add a code from an authenticator app when you sign in for stronger account protection.
                </p>

                <div className="mt-6 flex flex-wrap gap-3">
                    <Link
                        href="/security"
                        className="ti-btn ti-btn-primary"
                    >
                        Set up two-factor authentication
                    </Link>
                    <Link
                        href="/two-factor-prompt/skip"
                        method="post"
                        as="button"
                        className="ti-btn ti-btn-soft-secondary"
                    >
                        Skip for now
                    </Link>
                </div>
            </section>
        </MainLayout>
    );
}