{{--
    Dropdown Component - shadcn-style
    
    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' => 'ltr:origin-top-left rtl:origin-top-right start-0',
        'right' => 'ltr:origin-top-right rtl:origin-top-left end-0',
        'center' => 'origin-top left-1/2 -translate-x-1/2',
    ];
    
    $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">
        {{ $trigger }}
    </div>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="absolute z-50 mt-1.5 {{ $widthClasses[$width] ?? 'w-48' }} {{ $alignClasses[$align] ?? $alignClasses['right'] }}"
        style="display: none;"
        @click="open = false"
    >
        <div class="rounded-md border bg-popover p-1 text-popover-foreground shadow-md {{ $contentClasses }}">
            {{ $slot }}
        </div>
    </div>
</div>