@php
    $active = !empty($active) ? 'active' : '';
    $ariaExpanded = $active ? 'true' : 'false';
@endphp


<div class="accordion-item {{ $active }}" id="{{ $accordionId ?? '' }}">
    <button class="accordion-toggle inline-flex items-center justify-between text-start"
        aria-controls="{{ $accordCollapseID ?? '' }}" aria-expanded="{{ $ariaExpanded }}">
        {{ $accordTitle ?? '' }}
        @switch($icon)
            @case('math')
                <span class="icon-[tabler--plus] accordion-item-active:hidden text-base-content size-4.5 block shrink-0"></span>
                <span class="icon-[tabler--minus] accordion-item-active:block text-base-content size-4.5 hidden shrink-0"></span>
            @break

            @case('arrows')
                <span class="icon-[tabler--chevron-down] accordion-item-active:rotate-180 size-4"></span>
            @break

            @case('air')
            @break

            @default
        @endswitch
    </button>
    <div id="{{ $accordCollapseID ?? '' }}"
        class="accordion-content {{ $active ? '' : 'hidden' }} w-full overflow-hidden transition-[height] duration-300"
        aria-labelledby="{{ $accordionId ?? '' }}" role="region">
        <div class="px-5 pb-4">
            {{ $accordDetails ?? '' }}
        </div>
    </div>
</div>