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

<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
    <button type="button"
            @click="toggleSection('{{ $id }}')"
            class="flex w-full items-start gap-4 px-5 py-4 text-left transition hover:bg-slate-50/80">
        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-600">
            {!! $icon ?? '' !!}
        </span>
        <span class="min-w-0 flex-1">
            <span class="block text-sm font-semibold text-slate-900">{{ $title }}</span>
            <span class="mt-0.5 block text-xs leading-relaxed text-slate-500">{{ $description }}</span>
        </span>
        <svg class="mt-1 h-5 w-5 shrink-0 text-slate-400 transition"
             :class="openSection === '{{ $id }}' ? 'rotate-180' : ''"
             fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
        </svg>
    </button>

    <div x-show="openSection === '{{ $id }}'" x-cloak class="border-t border-slate-100">
        <div class="px-5 py-5">
            {{ $slot }}
        </div>
    </div>
</div>