@props(['align' => 'right', 'width' => '48'])

@php
    $alignmentClasses = [
        'left' => 'origin-top-left left-0',
        'right' => 'origin-top-right right-0',
    ];

    $alignment = $alignmentClasses[$align] ?? $alignmentClasses['right'];

    $widthClasses = [
        '48' => 'w-48',
        '56' => 'w-56',
    ];

    $width = $widthClasses[$width] ?? $widthClasses['48'];
@endphp

<div x-show="open" x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100"
    x-transition:leave-end="transform opacity-0 scale-95"
    class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignment }}" style="display: none;"
    @click="open = false">
    <div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white">
        {{ $slot }}
    </div>
</div>