{{--
    Accordion Component
    Props:
      $items – array of { title, content }

    Usage:
      <x-utility.accordion :items="[
          ['title'=>'What is this?','content'=>'This is an accordion.'],
          ['title'=>'How does it work?','content'=>'Click the heading.'],
      ]"/>
--}}
@props(['items' => []])

<div x-data="accordion()" class="space-y-2">
    @foreach($items as $index => $item)
        <div class="overflow-hidden rounded-xl border border-border bg-card shadow-card">
            <button
                type="button"
                @click="toggle({{ $index }})"
                :aria-expanded="isOpen({{ $index }})"
                class="flex w-full items-center justify-between px-5 py-4
                       text-start text-sm font-semibold text-surface-900
                       dark:text-surface-100 hover:bg-surface-50 dark:hover:bg-surface-800
                       transition-colors duration-150 focus:outline-none focus:ring-2
                       focus:ring-inset focus:ring-primary-500"
            >
                <span>{{ $item['title'] }}</span>
                <svg
                    class="w-5 h-5 text-surface-400 transition-transform duration-200 flex-shrink-0 ms-3"
                    :class="isOpen({{ $index }}) ? 'rotate-180' : ''"
                    fill="none" stroke="currentColor" viewBox="0 0 24 24"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>

            <div
                x-show="isOpen({{ $index }})"
                x-collapse
                x-transition
            >
                <div class="px-5 pb-5 pt-1 text-sm text-surface-600 dark:text-surface-400 border-t border-surface-100 dark:border-surface-700">
                    {!! $item['content'] !!}
                </div>
            </div>
        </div>
    @endforeach
</div>