@props([
    'id' => null,
    'title' => null,
    'titleIcon' => null,
    'show' => true,
    'headerClass' => '',
])

@php
    $id = $id?? uniqid();
@endphp

<div {{ $attributes }}>
    <a 
        id="heading-{{ $id }}"
        @class(['collapse-header d-flex justify-content-between align-items-center p-2', $headerClass,  'collapsed' => ! $show])
        data-bs-toggle="collapse" 
        href="#collapse-{{ $id }}" 
        aria-expanded="{{ $show? 'true' : 'false' }}"
        aria-controls="collapse-{{ $id }}" 
        wire:ignore.self
    >
        <div class="d-flex align-items-center">
            <x-ui.nicon :name="$titleIcon" class="me-1"/>
            {{ $title?? '' }}
            {{ $headerInner?? '' }}
        </div>
        <x-ui.nicon id="collapse-caret" name="caret-down"/>
    </a>
    <div
        id="collapse-{{ $id }}" 
        @class(['collapse', 'show' => $show])
        aria-labelledby="heading-{{ $id }}"
        wire:ignore.self
    >
        {{ $slot }}
    </div>
</div>