@props([
    'labelledby' => '',
    'target',
    'heading',
    'content',
    'show' => '',
])

@php
    $isOpen = $show === 'show';
@endphp

<div
    x-data="{ open: {{ $isOpen ? 'true' : 'false' }} }"
    class="rounded-2xl border border-slate-200 bg-white shadow-sm"
>
    <button
        type="button"
        id="{{ $labelledby }}"
        @click="open = !open"
        :aria-expanded="open.toString()"
        aria-controls="{{ $target }}"
        class="flex w-full items-center justify-between gap-4 px-5 py-4 text-left"
    >
        <span class="font-semibold text-slate-900">{!! $heading !!}</span>

        <svg
            class="h-5 w-5 flex-shrink-0 text-slate-500 transition-transform duration-200"
            :class="{ 'rotate-180': open }"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
        >
            <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>
    </button>

    <div
        id="{{ $target }}"
        x-show="open"
        x-collapse
        aria-labelledby="{{ $labelledby }}"
        class="border-t border-slate-100 px-5 py-4 text-sm leading-relaxed text-slate-600"
    >
        {!! $content !!}
    </div>
</div>