@props([
    'title',
    'icon' => null,
    'theme' => 'primary', // primary, info/teal, success, warning, danger, secondary
    'collapsible' => false,
    'collapsed' => false,
    'id' => null
])

@php
    $cardId = $id ?? 'section-' . uniqid();
    $bodyId = $cardId . '-body';
@endphp

<div class="section-card" id="{{ $cardId }}">
    <div class="section-header theme-{{ $theme === 'primary' ? 'purple' : $theme }}">
        @if($icon)
            <i class="fas fa-{{ $icon }}"></i>
        @endif
        <h2 class="title">{{ $title }}</h2>

        @if($collapsible)
            <button
                type="button"
                class="btn btn-sm btn-light ms-auto"
                data-bs-toggle="collapse"
                data-bs-target="#{{ $bodyId }}"
                aria-expanded="{{ $collapsed ? 'false' : 'true' }}"
                aria-controls="{{ $bodyId }}"
                style="margin-left: auto; padding: 0.25rem 0.75rem;"
            >
                <i class="fas fa-chevron-down"></i>
            </button>
        @endif
    </div>

    <div class="section-body {{ $collapsible ? 'collapse' : '' }} {{ !$collapsed ? 'show' : '' }}"
         id="{{ $bodyId }}">
        {{ $slot }}
    </div>
</div>
