import { Link } from '@inertiajs/react';
import type { PropsWithChildren } from 'react';
import AppLogoIcon from '@/components/app-logo-icon';
import { useJabesWomenTheme } from '@/hooks/use-jabes-women';
import { home } from '@/routes';

export default function PublicLayout({ children }: PropsWithChildren) {
    useJabesWomenTheme();

    return (
        <div className="min-h-screen bg-background">
            <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
                <div className="mx-auto flex max-w-4xl items-center justify-between gap-4 px-6 py-4">
                    <Link
                        href={home()}
                        className="flex items-center gap-3 font-medium"
                    >
                        <AppLogoIcon className="h-9" alt="The Jabes" />
                        <span className="sr-only">Inicio</span>
                    </Link>
                </div>
            </header>
            <main className="mx-auto max-w-4xl px-6 py-10">{children}</main>
        </div>
    );
}