<script setup lang="ts">
const collapsed = defineModel<boolean>({
    default: true,
});
</script>
<template>
    <div @click="collapsed = !collapsed" class="flex gap-2 items-center cursor-pointer hover:text-opacity-75 text-light-100 dark:text-dark-100" :class="$attrs.class">
        <div class="w-4 h-4 transition-transform" :class="{'-rotate-90': collapsed}">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 8L12 17L21 8"></path>
            </svg>
        </div>
        <div class="font-semibold xl:text-base text-sm flex-1"><slot name="header"></slot></div>
    </div>
    <div v-if="!collapsed">
        <slot name="content"></slot>
    </div>
</template>