@props([
    'align' => 'left',
])

@php
    $menuAlign = $align === 'right' ? 'right-0' : 'left-0';
@endphp

<div
    x-data="{ open: false }"
    @click.outside="open = false"
    @keydown.escape.window="open = false"
    data-tw-dropdown
    {{ $attributes->merge(['class' => 'relative inline-block text-left']) }}
>
    <div @click="open = !open">
        {{ $trigger ?? $slot }}
    </div>

    <div
        x-show="open"
        x-cloak
        x-transition
        class="absolute {{ $menuAlign }} z-40 mt-2 min-w-[12rem] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] py-1 shadow-[var(--shadow-md)]"
        role="menu"
    >
        {{ $menu ?? '' }}
    </div>
</div>