<script setup>
const props = defineProps({
    title: String,
    slug: String,
    icon: {
        type: String,
        required: false,
    },
    active: Boolean,
});
</script>
<template>
    <li>
        <button
            type="button"
            class="flex items-center w-full py-1 pl-3 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
            :aria-controls="slug"
            :data-collapse-toggle="slug"
            :aria-expanded="active"
        >
            <component
                :is="`${icon}-icon`"
                v-if="icon"
                :class="`flex-shrink-0 size-5 text-black dark:text-gray-200 transition duration-75`"
            />
            <slot name="icon" v-else></slot>

            <span
                class="flex-1 ml-3 text-left whitespace-nowrap"
                sidebar-toggle-item=""
                >{{ title }}</span
            >
            <chevron-down-icon
                class="flex-shrink-0 w-4 h-4 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
            />
        </button>
        <ul :id="slug" :class="`py-2 pl-3 space-y-2 ${active ? '' : 'hidden'}`">
            <slot></slot>
        </ul>
    </li>
</template>
