<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const props = defineProps({
    item: {
        type: Object,
        required: true,
    },
});

const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
</script>
<template>
    <QItem active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
        <QItemSection avatar v-if="item.icon">
            <QIcon :name="item.icon" />
        </QItemSection>
        <QItemSection avatar v-if="!item.icon">
            <QIcon name="disabled_by_default" />
        </QItemSection>
        <QItemSection>{{ t(item.title) }}</QItemSection>
        <QItemSection side>
            <slot name="side" :item="item" />
        </QItemSection>
    </QItem>
</template>
