import ApplicationLogo from '@/Components/ApplicationLogo';
import { Link, usePage } from '@inertiajs/react';
import { PageProps } from '@/types';
import Button from './UI/Button';

export default function PublicNavbar() {
    const { auth } = usePage<PageProps>().props;

    return (
        <header className="sticky top-0 z-30 border-b border-outline-variant bg-surface/90 backdrop-blur">
            <div className="mx-auto flex min-h-20 flex-wrap gap-3 py-3 max-w-7xl items-center justify-between px-6 lg:px-margin-page">
                <div className="flex items-center gap-6">
                    <Link href="/" className="text-lg font-bold tracking-tight text-jgcp-navy">
                        <ApplicationLogo className="h-auto w-40 sm:w-48" />
                    </Link>
                    <nav className="hidden items-center gap-4 text-sm font-medium text-on-surface-variant xl:flex">
                        <Link href={route('institutes.index')} className="hover:text-jgcp-navy">
                            Institutes
                        </Link>
                        <Link href={route('institutes.index')} className="hover:text-jgcp-navy">
                            Programmes
                        </Link>
                        <Link href={route('faculty.index')} className="hover:text-jgcp-navy">
                            Faculty
                        </Link>
                        <Link href={route('alumni.index')} className="hover:text-jgcp-navy">
                            Alumni
                        </Link>
                        <Link href={route('resources.index')} className="hover:text-jgcp-navy">
                            Resource Library
                        </Link>
                        <Link href={route('forum.index')} className="hover:text-jgcp-navy">
                            Forum
                        </Link>
                    </nav>
                </div>

                <div className="flex items-center gap-3">
                    {auth?.user ? (
                        <Button href={route('dashboard')} variant="secondary">
                            Dashboard
                        </Button>
                    ) : (
                        <Button href={route('login')} variant="secondary">
                            Sign In
                        </Button>
                    )}
                    <Button href={auth?.user ? route('dashboard') : route('register')} variant="primary">
                        Enrol Now
                    </Button>
                </div>
            </div>
        </header>
    );
}