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

const props = defineProps({
    name: {type: String, required: true}
})

function toggleTooltips() {
    isCategoryHidden.value = !isCategoryHidden.value;
}

</script>

<template>
    <div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-gray-300 to-slate-300 dark:from-slate-500 dark:to-slate-600">
        <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">{{ props.name }}</button>
        <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
            <slot></slot>
        </div>
    </div>
</template>