import { Head, Link, router, usePage } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';
import { type SharedData } from '@/types';
import { useClearTheme } from '@/hooks/use-clear-theme';

export default function CheckoutLayout({ children, title }: { children: React.ReactNode; title?: string }) {
    useClearTheme();
    const { auth } = usePage<SharedData>().props;

    return (
        <div className="min-h-screen bg-slate-50">
            {title && <Head title={title} />}

            {/* Header minimal */}
            <header className="bg-white border-b border-slate-200">
                <div className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
                    <Link href={route('home')} className="flex items-center gap-2">
                        <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center">
                            <AppLogoIcon style={{ width: 16, height: 16, fill: 'white' }} />
                        </div>
                        <span className="font-black text-lg text-slate-900 tracking-tight">Kiraa</span>
                    </Link>
                    <div className="flex items-center gap-4">
                        <div className="flex items-center gap-1.5 text-xs text-slate-400">
                            <svg className="h-3.5 w-3.5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                            </svg>
                            Paiement sécurisé
                        </div>
                        {auth?.user && (
                            <button
                                onClick={() => router.post(route('logout'))}
                                className="cursor-pointer text-xs font-semibold text-slate-500 hover:text-slate-800 border border-slate-200 hover:border-slate-300 px-3 py-1.5 rounded-lg bg-white transition-all"
                            >
                                Déconnexion
                            </button>
                        )}
                    </div>
                </div>
            </header>

            {/* Content */}
            <main className="max-w-5xl mx-auto px-4 sm:px-6 py-10">
                {children}
            </main>

            {/* Footer minimal */}
            <footer className="text-center py-8 text-xs text-slate-400 space-x-4">
                <Link href="/mentions-legales" className="hover:text-slate-600 transition-colors">Mentions légales</Link>
                <span>·</span>
                <Link href="/cgu" className="hover:text-slate-600 transition-colors">CGU</Link>
                <span>·</span>
                <Link href="/politique-de-confidentialite" className="hover:text-slate-600 transition-colors">Confidentialité</Link>
                <span>·</span>
                <a href="mailto:contact@kiraa.ma" className="hover:text-slate-600 transition-colors">contact@kiraa.ma</a>
            </footer>
        </div>
    );
}
