@props([
    'id',
    'align' => 'end',
    'width' => 'w-80',
    'triggerClass' => '',
    'panelClass' => '',
])

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

<div class="relative" data-booklio-dropdown-root>
    <button
        type="button"
        aria-haspopup="menu"
        aria-expanded="false"
        aria-controls="{{ $id }}"
        data-booklio-dropdown-trigger="{{ $id }}"
        {{ $attributes->merge(['class' => $triggerClass]) }}
    >
        {{ $trigger }}
    </button>

    <div
        id="{{ $id }}"
        role="menu"
        data-booklio-dropdown-menu="{{ $id }}"
        data-align="{{ $align }}"
        class="booklio-dropdown-panel pointer-events-none invisible absolute {{ $alignmentClass }} top-full z-50 mt-2 {{ $width }} max-w-[calc(100vw-2rem)] translate-y-1 overflow-hidden rounded-lg border border-booklio-border bg-white text-left opacity-0 shadow-modal transition duration-150 ease-out {{ $panelClass }}"
    >
        {{ $slot }}
    </div>
</div>