@props([
    'styles' => 'relative inline-block text-left',
])

<div x-data="{ open: false }" class="{{ $styles }}">
    {{-- Simplified Button --}}
    <div>
        <button @click="open = !open" type="button"
            class="inline-flex items-center text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white focus:outline-none"
            aria-expanded="true" aria-haspopup="true">
            <span>{{ strtoupper(app()->getLocale()) }}</span>
            <svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                aria-hidden="true">
                <path fill-rule="evenodd"
                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                    clip-rule="evenodd" />
            </svg>
        </button>
    </div>

    {{-- Simplified Dropdown Panel --}}
    <div x-show="open" @click.away="open = false" x-transition
        class="origin-top-right absolute right-0 mt-2 w-28 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
        role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" style="display: none;">
        <div class="py-1" role="none">
            <form action="{{ route('language.switch') }}" method="POST" class="block">
                @csrf
                <input type="hidden" name="locale" value="en">
                <button type="submit"
                    class="w-full text-left px-4 py-2 text-sm {{ app()->getLocale() == 'en' ? 'font-bold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300' }} hover:bg-gray-100 dark:hover:bg-gray-700"
                    role="menuitem" tabindex="-1">
                    English
                </button>
            </form>
            <form action="{{ route('language.switch') }}" method="POST" class="block">
                @csrf
                <input type="hidden" name="locale" value="es">
                <button type="submit"
                    class="w-full text-left px-4 py-2 text-sm {{ app()->getLocale() == 'es' ? 'font-bold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300' }} hover:bg-gray-100 dark:hover:bg-gray-700"
                    role="menuitem" tabindex="-1">
                    Español
                </button>
            </form>
        </div>
    </div>
</div>