<script setup>
import { computed } from 'vue';
import { RouterLink, useRoute } from 'vue-router';

import useLeftSidebar from '@Stores/LeftSidebar';
import GoogleIcon     from '@Shared/GoogleIcon.vue';

/** Definidores */
const leftSidebar = useLeftSidebar();
const vroute      = useRoute();

/** Propiedades */
const props = defineProps({
    icon: String,
    name: String,
    to: String
});

const classes = computed(() => {
    let status = props.to === vroute.name
        ? 'bg-indigo-100/50 dark:bg-indigo-900/30 border-indigo-500 dark:border-indigo-400 text-indigo-700 dark:text-indigo-300'
        : 'border-transparent text-gray-600 dark:text-gray-400';

    return `flex items-center h-10 focus:outline-hidden hover:bg-gray-100 dark:hover:bg-gray-800 border-l-4 hover:border-indigo-400 dark:hover:border-indigo-500 pr-6 ${status} transition`;
});

const closeSidebar = () => {
    if(TwScreen.isDevice('phone') || TwScreen.isDevice('tablet')) {
        leftSidebar.close();
    }
};
</script>

<template>
    <li @click="closeSidebar()">
        <RouterLink
            :class="classes"
            :to="$view({name:to})"
        >
            <span
                v-if="icon"
                class="inline-flex justify-center items-center ml-8 mr-2"
            >
                <GoogleIcon
                    class="text-lg"
                    :name="icon"
                    outline
                />
            </span>
            <span
                v-else
                class="ml-8"
            />
            <span
                v-if="name"
                v-text="$t(name)"
                class="text-sm tracking-wide truncate"
            />
            <slot />
        </RouterLink>
    </li>
</template>
