<script setup lang="ts">
const { g, p } = useContentInjected()

const props = defineProps<{
  class?: string
  ux?: any
  orientation: 'horizontal' | 'vertical'
  exclude?: string[]
  linkProps?: any
}>()

const pages = computed(() => {
  const excluded = props.exclude ?? []

  return g.value.scaffold.pages.filter((i) => !excluded.includes(i.name))
})

const classes = useStyling(
  'scaffoldNavigationLinkList',
  {
    slots: {
      base: '',
      list: 'flex',
      item: '',
      link: '',
    },
    variants: {
      orientation: {
        horizontal: {
          list: 'flex-row',
        },
        vertical: {
          list: 'flex-col',
        },
      },
    },
  },
  props
)
</script>

<template>
  <nav :class="classes.base">
    <ul :class="classes.list">
      <li :class="classes.item" v-for="page in pages">
        <XText
          as="link"
          :class="classes.link"
          :text="page.text"
          :link-props="{ to: p(page.link) }"
          :margin="false"
          v-bind="props.linkProps"
        />
      </li>
    </ul>
  </nav>
</template>
