@props(['itemId' => md5(microtime(true)), 'header' => 'Accordion', 'content' => null])

@aware(['id' => md5(microtime(true))])
@php($class = 'accordion-button collapsed bg-body-tertiary py-3 px-4 fw-semibold text-body shadow-none d-flex align-items-center gap-3')

<div class="accordion-item" {{ $attributes }}>
    <h2 class="accordion-header">
        <button
            type="button"
            data-coreui-toggle="collapse"
            data-coreui-target="#{{ $itemId }}"
            @if (! is_string($header))
                {{ $header->attributes->merge(['class' => $class]) }}
            @else
                class="{{ $class }}"
            @endif
            wire:ignore.self
            aria-expanded="false"
            aria-controls="{{ $itemId }}"
        >
            {{ $header }}
        </button>
    </h2>
    <div id="{{ $itemId }}" class="accordion-collapse collapse" wire:ignore.self data-coreui-parent="#{{ $id }}">
        <div class="accordion-body">{{ $content ?? $slot }}</div>
    </div>
</div>