<template>
  <nav class="navigation" v-if="navigation">
    <NuxtLink
      v-for="item in navigation"
      :key="item.id"
      :to="getNavLink(item)"
      class="nav-link"
    >
      {{ item.label }}
    </NuxtLink>
  </nav>
</template>

<script setup lang="ts">
const { getNavigation } = useDirectus()

const { data: navigation } = await useAsyncData('navigation', () => getNavigation())

function getNavLink(item: any) {
  if (item.type === 'custom' && item.custom_route) {
    return item.custom_route
  }
  if (item.type === 'external' && item.external_url) {
    return item.external_url
  }
  if (item.type === 'page' && item.page_id) {
    return `/${item.page_id}`
  }
  return '/'
}
</script>

<style scoped>
.navigation {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-link {
  color: #4b5563;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link.router-link-active {
  color: #3b82f6;
}

@media (max-width: 768px) {
  .navigation {
    flex-direction: column;
    gap: 1rem;
  }
}
</style>
