<script setup lang="ts">
import { computed } from 'vue'
import { type HeaderEntry } from 'content/routes.js'
import { useRouteStore } from 'src/routes'

const props = defineProps<{
  entry: HeaderEntry,
}>()

const routeStore = useRouteStore()
const name = computed(() => !!(props.entry as any).path ? routeStore._routes[(props.entry as any).path].name : null)
const sameSite = (props.entry as any).path?.startsWith('/')
</script>

<template lang="pug">
li.header-entry
  span(
    v-if='entry.children'
  ) {{ entry.displayName }}
    ul
      HeaderLink(
        v-for='entry in entry.children'
        :entry='entry'
      )
  a(
    v-else-if='!sameSite'
    :href='entry.path'
  ) {{ entry.displayName }}
  router-link(
    v-else
    :to='{ name }'
  ) {{ entry.displayName }}
</template>
