@props(['id', 'title'])

<div class="border-b border-gray-200 last:border-0">
    <button 
        id="heading-{{ $id }}"
        type="button"
        class="flex justify-between w-full text-left py-4 px-4 font-medium text-gray-900 focus:outline-none hover:bg-gray-50"
        onclick="toggleAccordion('{{ $id }}')"
        aria-expanded="false"
        aria-controls="content-{{ $id }}"
    >
        <span>{{ $title }}</span>
        <svg 
            id="icon-{{ $id }}"
            xmlns="http://www.w3.org/2000/svg" 
            class="h-5 w-5 transition-transform duration-200" 
            viewBox="0 0 20 20" 
            fill="currentColor"
        >
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </button>
    
    <div 
        id="content-{{ $id }}"
        class="px-4 pb-4 text-gray-700 hidden"
        aria-labelledby="heading-{{ $id }}"
    >
        {{ $slot }}
    </div>
</div>