<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import GoogleIcon from '@Shared/GoogleIcon.vue';

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

/** Estado */
const isOpen = ref(false);
const vroute = useRoute();

/** Métodos */
const toggle = () => {
    isOpen.value = !isOpen.value;
};

/** Computed */
const buttonClasses = computed(() => {
    const baseClasses = 'flex items-center justify-between h-11 w-full focus:outline-hidden hover:bg-gray-100 dark:hover:bg-gray-800 border-l-4 pr-6 transition text-left';
    const colorClasses = isOpen.value
        ? 'bg-indigo-50 dark:bg-indigo-900/20 border-indigo-600 dark:border-indigo-400 text-indigo-700 dark:text-indigo-300'
        : 'border-transparent text-gray-700 dark:text-gray-300';

    return `${baseClasses} ${colorClasses}`;
});
</script>

<template>
    <li>
        <button
            @click="toggle"
            :class="buttonClasses"
            type="button"
        >
            <div class="flex items-center">
                <span
                    v-if="icon"
                    class="inline-flex justify-center items-center ml-4 mr-2"
                >
                    <GoogleIcon
                        class="text-xl"
                        :name="icon"
                        outline
                    />
                </span>
                <span
                    v-if="name"
                    v-text="$t(name)"
                    class="text-sm tracking-wide truncate"
                />
            </div>
            <GoogleIcon
                :name="isOpen ? 'expand_less' : 'expand_more'"
                class="text-lg mr-2"
            />
        </button>

        <!-- Submenu -->
        <ul
            v-show="isOpen"
            class="bg-gray-50 dark:bg-gray-900/50"
        >
            <slot />
        </ul>
    </li>
</template>
