@props(['align' => 'right'])

<div class="relative" x-data="{ open: false }" @click.away="open = false">
    <!-- Trigger Button -->
    <button 
        @click="open = ! open" 
        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
        aria-label="{{ __('messages.switch_language') }}"
    >
        <!-- Globe Icon -->
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
        </svg>
        <span class="ms-2">{{ app()->getLocale() === 'ar' ? __('messages.arabic') : __('messages.english') }}</span>
        <svg class="ms-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <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>

    <!-- Dropdown Menu -->
    <div 
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="absolute z-50 mt-2 {{ $align === 'right' ? 'end-0' : 'start-0' }} w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5"
        style="display: none;"
    >
        <div class="py-1">
            <!-- English Option -->
            <form method="POST" action="{{ route('language.switch') }}" class="block">
                @csrf
                <input type="hidden" name="language" value="en">
                <button 
                    type="submit"
                    class="w-full text-start px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center {{ app()->getLocale() === 'en' ? 'bg-gray-50 dark:bg-gray-700' : '' }}"
                >
                    <span class="me-2">🇬🇧</span>
                    {{ __('messages.english') }}
                    @if(app()->getLocale() === 'en')
                        <svg class="ms-auto h-4 w-4 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                    @endif
                </button>
            </form>

            <!-- Arabic Option -->
            <form method="POST" action="{{ route('language.switch') }}" class="block">
                @csrf
                <input type="hidden" name="language" value="ar">
                <button 
                    type="submit"
                    class="w-full text-start px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center {{ app()->getLocale() === 'ar' ? 'bg-gray-50 dark:bg-gray-700' : '' }}"
                >
                    <span class="me-2">🇸🇦</span>
                    {{ __('messages.arabic') }}
                    @if(app()->getLocale() === 'ar')
                        <svg class="ms-auto h-4 w-4 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                        </svg>
                    @endif
                </button>
            </form>
        </div>
    </div>
</div>