@props(['title' => '', 'collapsible' => true, 'icon' => '', 'id' => ''])

@php
    $sectionId = $id ?: 'section-' . Str::slug($title);
@endphp

<div class="card border shadow-sm mb-3 form-section" id="{{ $sectionId }}">
    <div class="card-header bg-body {{ $collapsible ? 'cursor-pointer' : '' }}" {{ $collapsible ? 'data-bs-toggle=collapse data-bs-target=#' . $sectionId . '-body role=button' : '' }}>
        <div class="d-flex align-items-center justify-content-between">
            <h6 class="card-title mb-0 fw-semibold">
                @if($icon)
                    <i class="bi {{ $icon }} me-2 text-primary"></i>
                @endif
                {{ $title }}
            </h6>
            @if($collapsible)
                <i class="bi bi-chevron-down text-muted transition-transform" style="transition:transform 0.2s;"></i>
            @endif
        </div>
    </div>
    <div class="card-body collapse {{ $collapsible ? '' : 'show' }}" id="{{ $sectionId }}-body" data-bs-parent="">
        {{ $slot }}
    </div>
</div>