<x-dropdown align="right" width="48">
    <x-slot name="trigger">
        <button class="btn btn-ghost btn-sm gap-2" type="button">
            <img src="{{ asset('images/flags/' . ($languages[$currentLocale]['flag'] ?? 'gb.svg')) }}"
                 class="w-5 h-4 rounded-sm"
                 alt="{{ $languages[$currentLocale]['name'] ?? 'English' }}">
            <!--
            <span class="hidden sm:inline">{{ $languages[$currentLocale]['name'] ?? 'English' }}</span>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
            </svg> -->
        </button>
    </x-slot>

    <x-slot name="content">
        <div class="py-1">
            @foreach($languages as $code => $lang)
                <button wire:click="switchLanguage('{{ $code }}')"
                        class="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-base-200 rounded-md {{ $currentLocale === $code ? 'bg-primary/10 text-primary font-medium' : 'text-base-content' }}"
                        type="button">
                    <img src="{{ asset('images/flags/' . $lang['flag']) }}"
                         class="w-5 h-4 rounded-sm border border-base-300"
                         alt="{{ $lang['name'] }}">
                    <span>{{ $lang['name'] }}</span>
                    @if($currentLocale === $code)
                        <svg class="ml-auto w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    @endif
                </button>
            @endforeach
        </div>
    </x-slot>
</x-dropdown>