<template>
  <nuxt-link-locale
    :to="item.to"
    @mouseenter="hover = true"
    @mouseleave="hover = false"
    :class="{'opacity-30' : !hover && someHovered}"
    class="flex items-center gap-4 px-2.5 py-2 hover:bg-gray-50 rounded-lg dark:hover:bg-gray-800 normal-case transition-all "
  >
    <div class="min-w-8 h-8 rounded-lg flex items-center justify-center dark:text-gray-900 text-white bg-gradient-blue">
      <component
        :is="item.icon"
        class="h-5 w-5"
      />
    </div>
    <span class="text-sm text-deepblue-900 dark:text-[#E3E5E8]">{{ item.title }}</span>
  </nuxt-link-locale>
</template>

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

defineProps<{
  item: NavChildItem
  someHovered: boolean
}>()
const hover = ref(false)
</script>

<style scoped>

</style>
