@props(['allowMultiple' => false])

<div 
  x-data="{
    active: {{ $allowMultiple ? '[]' : 'null' }},
    isMultiple: {{ $allowMultiple ? 'true' : 'false' }},
    toggleItem(id) {
      if (this.isMultiple) {
        const index = this.active.indexOf(id);
        index === -1 ? this.active.push(id) : this.active.splice(index, 1);
      } else {
        this.active = this.active === id ? null : id;
      }
    }
  }"
  {{ $attributes->merge(['class' => 'space-y-4']) }}
>
  {{ $slot }}
</div>