<script setup lang="ts">
import { defineProps } from 'vue'
import type { MenuItemModel } from '@/utils/interfaces'
import { DotOutline } from '@/utils/icons';

defineProps({
    item: {
        type: Object as () => MenuItemModel,
        required: true
    },
    isMenuSelected: {
        type: Boolean,
        required: true
    },
    isChildren: {
        type: Boolean,
        default: false
    }
})
</script>

<template>
    <RouterLink :to="item.href"
        :class="[isMenuSelected ? 'bg-primary-500 text-white font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-gray-900', 'group w-full flex items-center pl-2 py-2 text-xs rounded-lg']">
        <embed :src="isChildren ? DotOutline : item.icon" type="image/svg+xml"
            :class="[isMenuSelected ? 'text-white' : 'text-aside group-hover:text-gray-900', 'mr-3 flex-shrink-0 h-6 w-6']">
        {{ item.name }}
    </RouterLink>
</template>