@php
    $current   = app()->getLocale();
    $languages = config('localization.languages', []);
@endphp

<div x-data="dropdown({ align: 'right', lockScroll: false })" class="relative inline-flex">
    <button
        type="button"
        data-dropdown-trigger
        x-ref="trigger"
        @click="toggle()"
        {{ $attributes->merge(['class' => 'btn-icon btn-ghost inline-flex items-center justify-center font-bold text-xs transition-colors gap-1']) }}
        title="Switch Language"
    >
        <span>{{ $languages[$current] ?? strtoupper($current) }}</span>
        <x-heroicon-o-chevron-down class="h-3 w-3" />
    </button>

    <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-right' : 'origin-top-right'"
        class="min-w-[120px] animate-fade-in rounded-xl border border-border bg-card py-1 shadow-soft dark:bg-card z-50 w-32"
    >
        @foreach($languages as $code => $name)
            <form method="POST" action="{{ route('locale.switch', $code) }}" @submit="close()">
                @csrf
                <button type="submit" class="w-full flex items-center gap-2 px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted {{ $current === $code ? 'font-bold text-primary-600 dark:text-primary-400' : '' }}">
                    {{ $name }}
                </button>
            </form>
        @endforeach
    </div>
</div>