{{--
    Dropdown Component
    Props:
      $align   – left|right (default: left)
      $width   – Tailwind width class (default: w-48)
      $trigger – named slot for the trigger button

    Usage:
      <x-utility.dropdown align="right">
          <x-slot:trigger>
              <x-buttons.secondary>Options</x-buttons.secondary>
          </x-slot:trigger>
          <x-slot:items>
              <a href="#" class="block px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted">Edit</a>
              <a href="#" class="block px-4 py-2 text-sm text-destructive transition-colors hover:bg-destructive/10">Delete</a>
          </x-slot:items>
      </x-utility.dropdown>
--}}
@props([
    'align' => 'left',
    'width' => 'w-48',
    'lockScroll' => false,
])

<div x-data="dropdown({ align: @js($align === 'right' ? 'right' : 'left'), lockScroll: @js($lockScroll) })" class="relative inline-block">
    {{-- Trigger --}}
    <div data-dropdown-trigger x-ref="trigger" @click="toggle()">
        {{ $trigger }}
    </div>

    {{-- Menu (positioned via fixed + teleport in dropdown.js) --}}
    <div
        x-ref="menu"
        x-show="open"
        x-cloak
        x-transition:enter="transition-opacity ease-out duration-100"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition-opacity ease-in duration-75"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        :class="placement === 'top' ? 'origin-bottom' : 'origin-top'"
        @class([
            'rounded-xl border border-border bg-card py-2 shadow-hover',
            $width,
        ])
    >
        {{ $items ?? $slot }}
    </div>
</div>