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

const { t, te } = useI18n();

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

const itemComputed = computed(() => {
    const item = JSON.parse(JSON.stringify(props.item));
    const [, , section] = item.title.split('.');

    if (!te(item.title)) item.title = t(`globals.pageTitles.${section}`);
    return item;
});
</script>
<template>
    <QItem
        active-class="bg-vn-hover"
        class="min-height"
        :to="{ name: itemComputed.name }"
        clickable
        v-ripple
    >
        <QItemSection avatar v-if="itemComputed.icon">
            <QIcon :name="itemComputed.icon" />
        </QItemSection>
        <QItemSection avatar v-if="!itemComputed.icon">
            <QIcon name="disabled_by_default" />
        </QItemSection>
        <QItemSection>
            {{ t(itemComputed.title) }}
            <QTooltip v-if="item.keyBinding">
                {{ 'Ctrl + Alt + ' + item?.keyBinding?.toUpperCase() }}
            </QTooltip>
        </QItemSection>
        <QItemSection side>
            <slot name="side" :item="itemComputed" />
        </QItemSection>
    </QItem>
</template>
<style lang="scss" scoped>
.q-item {
    min-height: 5vh;
}
</style>
