<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 flex-1 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>
                    <NuxtLink to="/identification-bovin" custom v-slot="{ href, navigate, isActive }">
                        <a
                            :href="href"
                            @click="navigate"
                            :class="isIdentificationActive ? 'opacity-100' : 'opacity-50'"
                        >
                            Identification
                        </a>
                    </NuxtLink>
                </nav>
                <button
                    type="button"
                    class="ml-auto text-xl font-bold uppercase text-white transition hover:opacity-80"
                    @click="handleLogout"
                >
                    Déconnexion
                </button>
            </div>
        </header>
        <main class="mx-auto w-full max-w-[1280px] px-6 pt-[85px] pb-0">
            <slot/>
        </main>
    </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '~/stores/auth'

const route = useRoute()
const auth = useAuthStore()
const isReceptionActive = computed(() => route.path.startsWith('/reception'))
const isIdentificationActive = computed(() => route.path.startsWith('/identification-bovin'))

const handleLogout = async () => {
  try {
    await auth.logout()
  } finally {
    await navigateTo('/login')
  }
}
</script>
