<template>
    <div class="border-b border-border last:border-b-0">
        <button
            @click="open = !open"
            class="w-full flex items-center gap-2 px-3 py-2 bg-section hover:bg-section/80 transition-colors cursor-pointer select-none"
        >
            <span
                class="inline-block w-0 h-0 border-l-[4px] border-l-transparent border-r-[4px] border-r-transparent border-t-[5px] border-t-label transition-transform duration-200"
                :class="{ '-rotate-90': !open }"
            ></span>
            <span class="text-[11px] font-semibold uppercase tracking-[0.1em] text-label">{{ title }}</span>
            <span v-if="badge !== undefined" class="ml-auto text-[10px] text-muted bg-deep px-1.5 py-0.5 rounded-sm">{{ badge }}</span>
        </button>
        <div class="folder-content" :class="{ 'folder-collapsed': !open }">
            <div class="px-3 py-3">
                <slot />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
    title: { type: String, required: true },
    badge: { type: [String, Number], default: undefined },
    defaultOpen: { type: Boolean, default: true },
});

const open = ref(props.defaultOpen);
</script>
