{{--
    Dropdown Component - AdminLTE 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
    $alignStyles = [
        'left' => 'left: 0; transform-origin: top left;',
        'right' => 'right: 0; transform-origin: top right;',
        'center' => 'left: 50%; transform: translateX(-50%); transform-origin: top center;',
    ];
    
    $widthStyles = [
        '32' => 'width: 8rem;',
        '40' => 'width: 10rem;',
        '48' => 'width: 12rem;',
        '56' => 'width: 14rem;',
        '64' => 'width: 16rem;',
        '80' => 'width: 20rem;',
    ];
@endphp

<style>
    .dropdown-lte {
        position: relative;
        display: inline-block;
    }
    .dropdown-menu-lte {
        position: absolute;
        z-index: 1000;
        margin-top: 0.5rem;
        min-width: 10rem;
        padding: 0.5rem;
        background-color: #fff;
        border: 1px solid var(--lte-border-color, #dee2e6);
        border-radius: var(--lte-border-radius, 0.375rem);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .dropdown-menu-lte[x-cloak] {
        display: none !important;
    }
    /* Dark mode */
    .dark .dropdown-menu-lte {
        background-color: #1f2937;
        border-color: #374151;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
    }
</style>

<div class="dropdown-lte" 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-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="dropdown-menu-lte {{ $contentClasses }}"
        style="{{ $widthStyles[$width] ?? 'width: 12rem;' }} {{ $alignStyles[$align] ?? $alignStyles['right'] }}"
        x-cloak
        @click="open = false"
    >
        {{ $slot }}
    </div>
</div>