@props(['type' => 'single', 'collapsible' => 'true'])

<div {{ $attributes->merge(['class' => 'w-full']) }}
    x-data="{
        activeItem: null,
        type: '{{ $type }}',
        collapsible: {{ $collapsible === 'true' ? 'true' : 'false' }},
        setActiveItem(value) {
            if (this.type === 'single') {
                this.activeItem = this.activeItem === value && this.collapsible ? null : value;
            } else {
                // For multiple type, toggle the value
                if (!this.activeItem) this.activeItem = [];
                const index = this.activeItem.indexOf(value);
                if (index === -1) {
                    this.activeItem.push(value);
                } else if (this.collapsible) {
                    this.activeItem.splice(index, 1);
                }
            }
        },
        isActive(value) {
            if (this.type === 'single') {
                return this.activeItem === value;
            } else {
                return this.activeItem && this.activeItem.includes(value);
            }
        }
    }"
>
    {{ $slot }}
</div>