<template>
  <header class="py-4 container mx-auto max-2xl:pl-4">
    <div class="flex flex-row-reverse justify-end gap-4 items-center max-w-[1280px] mx-auto">
      <slot name="content" />
      <div class="flex items-center gap-32">
        <div class="russo-one-regular cursor-pointer !text-primary">
          <UiParagraph as="span" class="[&]:text-5xl">
            <RouterLink to="/"> Vino Galante </RouterLink>
          </UiParagraph>
        </div>
        <div class="flex flex-wrap space-x-10">
          <UiNav :nav-content="headerNavigation" />
        </div>
      </div>
    </div>
    <slot name="right-icons" />
  </header>
</template>

<script setup lang="ts">
import UiNav from '@/components/UiNav/UiNav.vue'
import { RouterLink } from 'vue-router'
import { headerNavigation } from './_data'
import UiParagraph from '@/components/Typography/UiParagraph.vue'
</script>
