@props({'value': '', 'title': ''})
<div data-slot="accordion-item" x-bind:data-state="open === '{{ value }}' ? 'open' : 'closed'" {{ attributes.cn("border-b last:border-b-0") }}>
  <h3 class="flex">
    <button type="button" x-on:click="open = (open === '{{ value }}' ? '' : '{{ value }}')" x-bind:aria-expanded="open === '{{ value }}'"
      class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">
      {{ title }}
      <svg x-bind:class="open === '{{ value }}' ? 'rotate-180' : ''" class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </button>
  </h3>
  <div x-show="open === '{{ value }}'" x-cloak x-transition.opacity class="overflow-hidden pb-4 text-sm">{{ slot }}</div>
</div>