<template>
  <Teleport to="body">
    <Transition name="overlay">
      <div
        v-if="open"
        class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
        @click="emit('update:open', false)"
      />
    </Transition>

    <Transition name="slide-menu">
      <nav
        v-if="open"
        class="fixed inset-y-0 right-0 z-50 w-72 bg-[hsl(var(--color-surface))] border-l border-[hsl(var(--color-text)/0.1)] p-6 shadow-2xl"
        aria-label="Menu mobile"
      >
        <div class="flex items-center justify-between mb-8">
          <span class="font-display text-lg font-bold text-gradient">Menu</span>
          <button
            class="btn-ghost !p-2"
            aria-label="Fermer le menu"
            @click="emit('update:open', false)"
          >
            <div class="i-lucide-x h-5 w-5" />
          </button>
        </div>

        <ul class="flex flex-col gap-2">
          <li v-for="item in nav" :key="item.to">
            <NuxtLink
              :to="item.to"
              class="flex items-center gap-3 rounded-lg px-4 py-3 text-base font-medium text-[hsl(var(--color-text)/0.7)] transition-colors hover:bg-[hsl(var(--color-text)/0.06)] hover:text-[hsl(var(--color-text))]"
              active-class="bg-primary/10 text-primary"
              @click="emit('update:open', false)"
            >
              {{ item.label }}
            </NuxtLink>
          </li>
        </ul>
      </nav>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
defineProps<{
  open: boolean
  nav: { label: string; to: string }[]
}>()

const emit = defineEmits<{
  'update:open': [value: boolean]
}>()
</script>

<style scoped>
.overlay-enter-active,
.overlay-leave-active {
  transition: opacity 0.3s;
}
.overlay-enter-from,
.overlay-leave-to {
  opacity: 0;
}

.slide-menu-enter-active,
.slide-menu-leave-active {
  transition: transform 0.3s var(--ease-out-expo);
}
.slide-menu-enter-from,
.slide-menu-leave-to {
  transform: translateX(100%);
}
</style>
