<script setup lang="ts">
  import type { NavigationMenuItem } from '@nuxt/ui';

  const route = useRoute();

  const items = computed<NavigationMenuItem[]>(() => [{
    label: 'Home',
    to: '/',
    icon: 'i-line-md-home-twotone',
    active: route.path == '/'
  }, {
    label: 'Projects',
    to: '/projects',
    icon: 'i-line-md-document-code-twotone',
    active: route.path.startsWith('/projects')
  }, {
    label: 'Blog',
    icon: 'i-line-md-text-box-multiple-twotone',
    to: '/blog',
    active: route.path.startsWith('/blog')
  }, {
    label: 'About Me',
    icon: 'i-line-md-question-circle-twotone',
    to: '/about',
    active: route.path.startsWith('/about')
  }])
</script>

<template>
  <UHeader
    :toggle="{
      color: 'primary',
      variant: 'subtle',
      class: 'rounded-full'
    }"
  >
    <template #title>
      ZervoDev
    </template>

    <UNavigationMenu :items="items" />

    <template #right>
      <UColorModeButton />
    </template>

    <template #body>
      <UNavigationMenu
        :items="items"
        orientation="vertical"
        class="-mx-2.5"
      >
        <template #item="{ item, active }">
          <NuxtLink
            :to="item.to"
            class="flex items-center gap-3 px-2 py-2 text-base font-bold rounded-lg transition-colors"
            :class="[
              active ? 'text-primary-500' : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800'
            ]"
          >
            <icon :name="item.icon" class="w-7 h-7" />
            <span>{{ item.label }}</span>
          </NuxtLink>
        </template>
      </UNavigationMenu>
    </template>
  </UHeader>
</template>