<script setup lang="ts">
import type { NavItem } from '@nuxt/content/dist/runtime/types'

const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))

const { data: page, pending } = await useAsyncData('header', () => queryContent('/header').findOne())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}

effect(() => {
  console.log(page.value?.body)
})

const links: any = computed(() => page.value?.body ?? [])

</script>

<template>
  <div class=" sticky top-[20px] pt-10 z-50 flex items-center justify-between container mx-auto">
    <BrandLogo />
    <USkeleton v-if="pending" class="h-10 w-[250px] bg-gray-900" />
    <div v-else class="w-fit px-10 py-3 rounded-full bg-gray-900/90 z-50 shadow-lg">
      <UHeaderLinks :links="links" />
    </div>
  </div>
  <!-- <UHeader :links="links" class="mt-5 ">
    <template #logo>
      <UBadge label="SaaS" variant="subtle" class="mb-0.5" />
    </template>

<template #right>
      <UButton label="Sign in" color="gray" to="/login" />
      <UButton label="Sign up" icon="i-heroicons-arrow-right-20-solid" trailing color="black" to="/signup" class="hidden lg:flex" />
    </template>

<template #panel>
      <UNavigationTree :links="mapContentNavigation(navigation)" default-open />
    </template>
</UHeader> -->
</template>
