<template>
    <CollapsibleRoot v-model:open="model" :disabled="disabled" :defaultOpen="defaultOpen">
        <slot name="alwaysVisible"></slot>
        <div class="flex flex-row justify-center items-center">
            <span>{{ label }}<slot name="label"></slot></span>
            <CollapsibleTrigger class="ms-4" asChild>
                <Button icon :disabled="disabled">
                    <Icon v-if="model" icon="radix-icons:cross-2" class="h-4 w-4" />
                    <Icon v-else icon="radix-icons:row-spacing" class="h-4 w-4" />
                </Button>
            </CollapsibleTrigger>
        </div>
        <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out]">
            <slot></slot>
        </CollapsibleContent>
    </CollapsibleRoot>
</template>

<script setup lang="ts">
import { Icon } from '@iconify/vue';
const { label, disabled = false, defaultOpen = false } = defineProps<{
    label?: string
    disabled?: boolean
    defaultOpen?: boolean
}>();
const model = defineModel<boolean>();
</script>

<style>
@keyframes collapseOpen {
  from {
    height: 0;
  }
  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes collapseClose {
  from {
    height: var(--radix-collapsible-content-height);
  }
  to {
    height: 0;
  }
}
</style>