<script lang="ts">
import { defineComponent, PropType } from 'vue';
import NavigationSection from '@/components/layout/TheHeader/Desktop/NavigationSection/NavigationSection.vue';
import { INavigation } from '@/components/layout/navigation.types';

export default defineComponent({
  components: { NavigationSection },

  props: {
    navigation: {
      type: Object as PropType<INavigation.NavigationSection>,
      required: true,
    },
  },

  data: () => ({
    activeItemIndex: 0,
  }),
});
</script>


<template>
  <nav class="desktop-nav grid grid-flow-col gap-16 items-center font-medium text-14">
    <NavigationSection
      v-for="(item, index) in navigation"
      :key="index"
      :opened="activeItemIndex === index"
      :data="item"
      @mouseover="activeItemIndex = index"
      @mouseleave="activeItemIndex = 0" />
    <router-link to="/case-studies" class="text-gray-1200 transition-colors hover:text-orange-600">Case Studies</router-link>
    <router-link to="/pricing" class="text-gray-1200 transition-colors hover:text-orange-600">Pricing</router-link>
  </nav>
</template>