import ApplicationLogo from '@/Components/ApplicationLogo';
import NavLink from '@/Components/NavLink';
import Footer from '@/Components/Footer';
import { Link, usePage } from '@inertiajs/react';
import { PropsWithChildren } from 'react';

export default function Guest({ children }: PropsWithChildren) {
    const { url } = usePage();

    return (
        <div>
            <header className="navbar px-4 bg-primary-background border-b-2 border-secondary-main">
                <div id="ProjectTitle" className="navbar-start">
                    <Link href="/">
                        <ApplicationLogo />
                    </Link>
                </div>

                <nav className="navbar-end">
                    <ul className="menu menu-horizontal px-1">
                        <li><NavLink href="/" active={url === '/'}>
                            Home
                        </NavLink></li>
                        <li><NavLink href="/about" active={url === '/about'}>
                            About
                        </NavLink></li>
                        <li><NavLink href={route('login')}
                            active={url === '/login'}
                            >
                                Log in
                        </NavLink></li>
                        <li><NavLink href={route('register')}
                            active={url === '/register'}
                            >
                                Register
                        </NavLink></li>
                    </ul>
                </nav>
            </header>

            <main>
                {children}
            </main>

            <footer>
                <Footer />
            </footer>
        </div>
    );
}