import { Link, usePage } from '@inertiajs/react';
import { PropsWithChildren } from 'react';
import { SharedProps } from '@/types';

export default function PublicLayout({ children }: PropsWithChildren) {
    const { auth } = usePage<SharedProps>().props;

    return (
        <div className="min-h-screen bg-gray-950 text-gray-100">
            <nav className="mx-auto flex max-w-4xl items-center justify-between px-4 py-6">
                <Link href={route('home')} className="text-xl font-bold">
                    EmpireRP UCP
                </Link>
                <div className="flex items-center gap-4">
                    <Link href={route('news.index')} className="text-sm text-gray-300 hover:text-white">
                        News
                    </Link>
                    <Link
                        href={auth.user ? route('dashboard') : route('login')}
                        className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700"
                    >
                        {auth.user ? 'Dashboard' : 'Log in'}
                    </Link>
                </div>
            </nav>
            <main className="mx-auto max-w-4xl px-4 py-8">{children}</main>
        </div>
    );
}
