<script setup lang="ts">
import type {NavChild, NavChildItem} from '#adata-ui/components/navigation/header/types'

defineProps<{
  item: NavChildItem
  size: 'lg' | 'sm',
  someHovered: boolean
}>()
const hover = ref(false)
</script>

<template>
  <nuxt-link-locale
    :to="item.to"
    class="flex h-full justify-between xl:gap-4 rounded-[0.5rem] bg-gray-50 p-4 dark:bg-gray-800  transition-all dark:hover:bg-gray-800"
    :class="{'opacity-30': !hover && someHovered}"
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  >
    <div class="normal-case">
      <h4
        class="mb-2 font-semibold text-deepblue-900 dark:text-[#E3E5E8]"
        :class="{'heading-04' : size==='lg', 'heading-05' : size === 'sm'}"
      >
        {{ item.title }}
      </h4>
      <p class="text-gray-600 dark:text-gray-300 body-400">
        {{ item.subtitle ? item.subtitle : '' }}
      </p>
    </div>
    <div
      class="flex items-center justify-center self-end rounded-lg bg-gradient-blue  dark:text-gray-900 text-white"
      :class="{'h-8 min-w-8' : size==='sm', 'h-16 min-w-16' : size==='lg'}"
    >
      <component
        :is="item.icon"
        :class="{'h-5 w-5' : size==='sm', 'h-11 w-11' : size==='lg'}"
      />
    </div>
  </nuxt-link-locale>
</template>
