@props(['title' => ''])

<div 
  x-data="{ 
    id: $id('accordion'),
    isOpen: false 
  }"
  x-init="
    isOpen = $parent.isMultiple 
      ? $parent.active.includes(id) 
      : $parent.active === id;
    $watch('$parent.active', value => {
      isOpen = $parent.isMultiple 
        ? value.includes(id) 
        : value === id;
    });
  "
  {{ $attributes->merge(['class' => 'border rounded-lg']) }}
>
  <button 
    @click="$parent.toggleItem(id)"
    class="w-full px-4 py-3 text-left bg-gray-100 hover:bg-gray-200 transition-colors"
  >
    {{ $title }}
  </button>
  
  <div 
    x-show="isOpen"
    x-collapse
    class="p-4 bg-white"
  >
    {{ $slot }}
  </div>
</div>