<template>
    <div class="overflow-hidden">
        <button
            type="button"
            class="flex w-full items-center justify-between gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide text-left"
            @click="toggle"
        >
            <span class="flex-1">
                <slot name="header" />
            </span>
            <Icon
                name="mdi:chevron-down"
                size="24"
                class="shrink-0 transition-transform"
                :class="{ 'rotate-180': modelValue }"
            />
        </button>
        <div v-if="modelValue" class="border border-t-0 border-slate-200 px-6 py-6">
            <slot />
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    modelValue: boolean
}>()

const emit = defineEmits<{
    'update:modelValue': [value: boolean]
}>()

const toggle = () => emit('update:modelValue', !props.modelValue)
</script>
