<script setup lang="ts">
import { ref } from 'vue'
const isActive = ref(true);

function switchHiddenElement(){
    isActive.value = !isActive.value;
}

const props = defineProps(
    {
        categoryName: {required : true}
    }
)


</script>


<template>
    <div class="w-full mb-4 p-2 rounded-xl  shadow-md bg-gradient-to-r from-blue-400 to-blue-200 dark:from-blue-600 dark:to-blue-900">
        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
            <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
        </button>
        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
            <slot></slot>
        </div>
    </div>
</template>