@props(['id', 'title', 'icon' => 'bi-sliders'])

{{-- One collapsible "Optional" block inside the sports-match accordion.
     Independent toggle (no data-bs-parent) so several can be open at once. --}}
<div class="accordion-item">
    <h2 class="accordion-header" id="sm-heading-{{ $id }}">
        <button class="accordion-button collapsed" type="button"
                data-bs-toggle="collapse" data-bs-target="#sm-collapse-{{ $id }}"
                aria-expanded="false" aria-controls="sm-collapse-{{ $id }}">
            <i class="bi {{ $icon }} sm-acc-ico"></i>
            <span class="sm-acc-title">{{ $title }}</span>
            <span class="badge text-bg-secondary ms-2">Optional</span>
        </button>
    </h2>
    <div id="sm-collapse-{{ $id }}" class="accordion-collapse collapse" aria-labelledby="sm-heading-{{ $id }}">
        <div class="accordion-body">
            {{ $slot }}
        </div>
    </div>
</div>