<script setup>
import { Head, Link } from '@inertiajs/inertia-vue3'
import JetApplicationMark from '@/Jetstream/ApplicationMark.vue'

defineProps({
  title: String,
})
</script>

<template>
    <Head :title="title"></Head>

    <div class="min-h-screen bg-neutral-100">
        <header class="bg-white shadow-lg">
            <div class="max-w-7xl mx-auto">
                <nav class="">
                    <div class="flex justify-between h-16">
                        <div class="flex">
                            <!-- Logo -->
                            <div class="shrink-0 flex items-center">
                                <Link :href="route('home')">
                                    <JetApplicationMark class="block h-9 w-auto"></JetApplicationMark>
                                </Link>
                            </div>

                            <!-- Navigation Links -->
                            <nav class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                                <!-- <JetNavLink :href="route('categories')">Dashboard</JetNavLink> -->
                            </nav>
                        </div>
                        <div class="hidden sm:flex sm:items-center sm:ml-6">
                            <div class="ml-3 relative">
                                <Link v-if="$page.props.user" :href="route('dashboard')" class="text-sm text-gray-700 underline">
                                    Dashboard
                                </Link>

                                <template v-else>
                                    <Link :href="route('login')" class="text-sm text-gray-700 underline">
                                        Log in
                                    </Link>

                                    <Link v-if="$page.props.canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
                                        Register
                                    </Link>
                                </template>
                            </div>
                        </div>
                    </div>
                </nav>
            </div>
        </header>

        <div class="py-12">
            <div class="max-w-7xl mx-auto">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
