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

@php
    $alignClasses = match($align) {
        'left' => 'origin-top-left left-0',
        'right' => 'origin-top-right right-0',
        'center' => 'origin-top left-1/2 -translate-x-1/2',
        default => 'origin-top-left left-0',
    };
    
    $widthClasses = match($width) {
        '32' => 'w-32',
        '40' => 'w-40',
        '48' => 'w-48',
        '56' => 'w-56',
        '64' => 'w-64',
        '72' => 'w-72',
        'auto' => 'w-auto',
        default => 'w-48',
    };
@endphp

<div 
    x-data="{ open: false }" 
    @click.away="open = false" 
    @close.stop="open = false"
    {{ $attributes->merge(['class' => 'relative inline-block']) }}
>
    {{-- Trigger --}}
    <div @click="open = !open" class="cursor-pointer">
        {{ $trigger }}
    </div>

    {{-- Dropdown content --}}
    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        x-cloak
        class="absolute z-50 mt-2 {{ $widthClasses }} {{ $alignClasses }} rounded-xl bg-background-secondary border border-neutral/20 shadow-xl overflow-hidden"
    >
        <div class="py-1 {{ $contentClasses }}">
            {{ $slot }}
        </div>
    </div>
</div>