{{--
    Dropdown Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    
    Usage:
    <x-proxmox::ui.dropdown>
        <x-slot:trigger>
            <x-proxmox::ui.button>Options</x-proxmox::ui.button>
        </x-slot:trigger>
        
        <x-proxmox::ui.dropdown-item href="/profile">Profile</x-proxmox::ui.dropdown-item>
        <x-proxmox::ui.dropdown-item href="/settings">Settings</x-proxmox::ui.dropdown-item>
        <x-proxmox::ui.dropdown-divider />
        <x-proxmox::ui.dropdown-item wire:click="logout" variant="danger">Sign out</x-proxmox::ui.dropdown-item>
    </x-proxmox::ui.dropdown>
--}}

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

@php
    $alignClasses = [
        'left' => 'left-0 origin-top-left',
        'right' => 'right-0 origin-top-right',
        'center' => 'left-1/2 -translate-x-1/2 origin-top',
    ];
    
    $widthClasses = [
        '32' => 'w-32',
        '40' => 'w-40',
        '48' => 'w-48',
        '56' => 'w-56',
        '64' => 'w-64',
        '80' => 'w-80',
    ];
@endphp

<div class="relative inline-block" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
    <div @click="open = !open" class="focus-within:ring-2 focus-within:ring-primary/30 rounded-md">
        {{ $trigger }}
    </div>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="absolute z-50 mt-2 min-w-40 p-2 bg-background border border-neutral rounded-lg shadow-lg {{ $widthClasses[$width] ?? 'w-48' }} {{ $alignClasses[$align] ?? $alignClasses['right'] }} {{ $contentClasses }}"
        x-cloak
        @click="open = false"
    >
        {{ $slot }}
    </div>
</div>