@props([
    'align' => 'left', // left, right
    'width' => 'w-80 sm:w-96',
])

@php
    $alignmentClasses = $align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left';
@endphp

<details class="group relative inline-block text-left select-none">
    <summary class="list-none cursor-pointer p-1.5 rounded-lg bg-slate-800/80 border border-slate-700/60 text-slate-300 hover:text-white hover:bg-slate-700/60 transition-colors flex items-center justify-center w-8 h-8 focus:outline-none focus:ring-1 focus:ring-indigo-500">
        {{ $trigger ?? '' }}
        @if(!isset($trigger))
            <i class="fa-solid fa-bars text-sm"></i>
        @endif
    </summary>

    <!-- Backdrop for click-outside dismissal -->
    <div class="fixed inset-0 z-40" onclick="this.closest('details').removeAttribute('open')"></div>

    <!-- Dropdown Content Panel -->
    <div class="absolute {{ $alignmentClasses }} mt-2 {{ $width }} bg-slate-900 border border-slate-700/80 rounded-xl shadow-2xl p-3.5 z-50 backdrop-blur-xl text-white divide-y divide-white/10 font-normal">
        {{ $slot }}
    </div>
</details>