@props([
    'align' => 'end',
    'width' => 'w-64',
    'placement' => 'bottom',
])

@php
    $origin = $placement === 'top'
        ? ($align === 'start' ? 'origin-bottom-left' : 'origin-bottom-right')
        : ($align === 'start' ? 'origin-top-left' : 'origin-top-right');
@endphp

<div x-data="{ open: false }" x-on:keydown.escape.window="open = false" x-on:click.outside="open = false" class="relative">
    <div x-on:click="open = !open">
        {{ $trigger }}
    </div>

    <div
        x-show="open"
        x-transition:enter="ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        x-cloak
        x-on:click="open = false"
        @class([
            'absolute z-40 rounded-xl border border-stone-200 bg-white p-1.5 shadow-panel dark:border-stone-800 dark:bg-stone-900',
            $origin,
            $width,
            'mt-2 top-full' => $placement === 'bottom',
            'mb-2 bottom-full' => $placement === 'top',
            'right-0' => $align === 'end',
            'left-0' => $align === 'start',
        ])
    >
        {{ $slot }}
    </div>
</div>