<template>
  <UHeader>
    <template #title>
      <nuxt-link to="/" v-if="header?.logo?.src">
        <img
          :src="header?.logo?.src"
          :alt="header?.logo?.alt || ''"
          class="h-8 dark:hidden"
        />
        <img
          :src="header?.logo?.srcDark || header?.logo?.src"
          :alt="header?.logo?.alt || ''"
          class="h-8 hidden dark:block"
        />
      </nuxt-link>
      <span v-else>{{ header?.logo?.alt }}</span>
    </template>

    <UNavigationMenu :items="links" />

    <template #right>
      <span v-for="(button, index) in header?.nav?.buttons" :key="index"
        ><UButton
          class="hidden md:flex md:items-center md:justify-center py-2"
          :to="button?.to"
          :icon="button?.icon ? button?.icon : null"
          :target="button?.target ? button?.target : '_self'"
          :color="button?.color ? button?.color : 'primary'"
          :variant="button?.variant ? button?.variant : 'solid'"
          >{{ button?.label }}</UButton
        ></span
      >
    </template>

    <template #body>
      <UNavigationMenu orientation="vertical" :items="links" class="-mx-2.5" />
      <div class="mt-5 space-y-2">
        <UButton
          v-for="(button, index) in header?.nav?.buttons"
          :key="index"
          class="w-full justify-center"
          :to="button?.to"
          :icon="button?.icon ? button?.icon : null"
          :target="button?.target ? button?.target : '_self'"
          :color="button?.color ? button?.color : 'primary'"
          :variant="button?.variant ? button?.variant : 'solid'"
        >
          {{ button?.label }}
        </UButton>
      </div>
    </template>
  </UHeader>
</template>

<script setup>
const appConfig = useAppConfig();
const header = appConfig?.xMarketing?.header;
const links = header?.nav?.links || [];
</script>
