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

const props = defineProps<{
  class?: string
  ux?: any
  brandProps?: any
  linkProps?: any
  homeProps?: any
  mobileProps?: any
}>()

const classes = useStyling(
  'scaffoldSimpleHeader',
  {
    slots: {
      background: 'w-full h-full',
      container: 'flex',
      brand: 'relative grow flex items-center min-w-0',
      brandHome: 'hidden md:flex',
      brandMobile: 'md:hidden',
      navigation: 'flex items-center shrink-0',
      navigationList: 'flex items-center',
      navigationItem: 'hidden md:flex',
      navigationLink: '',
      separatorItem: 'hidden md:flex self-stretch items-center',
      separator: 'px-0 h-[60%]',
    },
  },
  props
)
</script>

<template>
  <XScaffoldContent id="header">
    <template #background>
      <div :class="classes.background" />
    </template>

    <div :class="classes.container">
      <div :class="classes.brand">
        <XScaffoldHomeButton :class="classes.brandHome" v-bind="props.homeProps" />
        <XScaffoldMobileMenuOpenButton :class="classes.brandMobile" v-bind="props.mobileProps" />
        <XScaffoldHeaderBrand v-bind="props.brandProps" />
      </div>

      <nav :class="classes.navigation">
        <ul :class="classes.navigationList">
          <li :class="classes.navigationItem" v-for="page in g.scaffold.pages">
            <XText
              :class="classes.navigationLink"
              as="link"
              :text="page.text"
              :link-props="{ to: p(page.link) }"
              v-bind="props.linkProps"
              :margin="false"
            />
          </li>

          <li :class="classes.separatorItem" v-if="$slots.locale || $slots.variant">
            <USeparator :class="classes.separator" orientation="vertical" />
          </li>

          <li v-if="$slots.locale">
            <slot name="locale" />
          </li>

          <li v-if="$slots.variant">
            <slot name="variant" />
          </li>
        </ul>
      </nav>
    </div>
  </XScaffoldContent>
</template>
