<template>
  <div class="desktop-item relative">
    <div
      class="head text-gray-1200 font-medium text-14 cursor-pointer transition-colors hover:text-orange-700"
      :class="{ 'text-orange-700': opened }"
      @mouseenter="hoveredItemIndex = 0"
    >
      {{ data.title }}
      <img
        :src="opened ? buttonIconOrange : buttonIconBlack"
        width="4.6"
        height="8"
        class="ml-2 rotate-90 transition-colors transition-transform"
      />
    </div>
    <transition name="dropdown-fade">
      <div v-show="opened" class="list-wrap absolute z-10 pt-32 -left-96">
        <div class="list relative grid grid-cols-navigation p-16 bg-white border-1 border-b-gray-200 shadow-nav-item">
          Dropdown section content
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import buttonIconBlack from '@/assets/img/static-icons/arrow/arrow-right-black.svg?url';
import buttonIconOrange from '@/assets/img/static-icons/arrow/arrow-right-orange.svg?url';
import { INavigation } from '@/components/layout/navigation.types';

export default defineComponent({
  name: 'NavigationSection',

  props: {
    modelValue: {
      type: String,
      default: '',
    },
    data: {
      type: Object as PropType<INavigation.NavigationItem>,
      required: true,
    },
    opened: Boolean,
  },

  data: () => ({
    buttonIconBlack,
    buttonIconOrange,
    hoveredItemIndex: 0,
    comingSoonItem: false,
  }),
});
</script>

<style lang="scss">
.list {
  &:before {
    @apply content-[''] absolute -top-2 left-[120px] w-[15px] h-[15px] bg-white -translate-x-1/2 rotate-45;
  }
}
</style>
