<template>
    <div class="min-h-screen bg-white text-neutral-900">
        <header class="w-full border-b border-neutral-200 bg-primary-500">
            <div class="flex w-full items-center px-6 py-4">
                <NuxtLink to="/" class="flex items-center gap-3">
          <span
              class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
          >
            LOGO
          </span>
                </NuxtLink>
                <nav class="mx-8 flex gap-8 text-2xl font-bold uppercase text-white">
                    <NuxtLink to="/" custom v-slot="{ href, navigate, isExactActive }">
                        <a
                            :href="href"
                            @click="navigate"
                            :class="isExactActive ? 'opacity-100' : 'opacity-50'"
                        >
                            Accueil
                        </a>
                    </NuxtLink>
                    <NuxtLink to="/reception" custom v-slot="{ href, navigate, isActive }">
                        <a
                            :href="href"
                            @click="navigate"
                            :class="isReceptionActive ? 'opacity-100' : 'opacity-50'"
                        >
                            Reception
                        </a>
                    </NuxtLink>
                </nav>
            </div>
        </header>
        <main class="mx-auto w-full max-w-[1050px] px-6 pt-[90px] pb-0">
            <slot/>
        </main>
    </div>
</template>

<script setup lang="ts">
const route = useRoute()
const isReceptionActive = computed(() => route.path.startsWith('/reception'))
</script>
