@props(['compact' => false, 'currentLocale' => app()->getLocale()])

<div class="locale-switcher relative shrink-0" x-data="{ open: false }">
    <button
        type="button"
        @click="open = !open"
        @keydown.escape.window="open = false"
        @class([
            'locale-switcher__trigger flex items-center gap-1.5 rounded-xl transition',
            'locale-switcher__trigger--compact h-10 border px-3 text-[13px] font-medium theme-toggle' => $compact,
            'w-full px-3 py-2 text-left text-sm text-[#374151] hover:bg-[#F7F7FC]' => ! $compact,
        ])
        :aria-expanded="open"
        aria-haspopup="listbox"
        aria-label="{{ __('common.language') }}"
    >
        <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802" />
        </svg>
        @if ($compact)
            <span class="uppercase tracking-wide">{{ $currentLocale }}</span>
        @else
            <span>{{ __('common.language') }}</span>
        @endif
    </button>

    <div
        x-show="open"
        @click.outside="open = false"
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95 -translate-y-1"
        x-transition:enter-end="opacity-100 scale-100 translate-y-0"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-100 translate-y-0"
        x-transition:leave-end="opacity-0 scale-95 -translate-y-1"
        @class([
            'locale-switcher__menu absolute top-[calc(100%+0.5rem)] z-50 overflow-hidden rounded-xl border shadow-lg',
            'locale-switcher__menu--compact right-0 min-w-[9.5rem]' => $compact,
            'locale-switcher__menu--panel right-0 w-44 p-1.5 border-[#E5E7EB] bg-white' => ! $compact,
        ])
        role="listbox"
        x-cloak
    >
        @unless ($compact)
            <p class="auth-text-muted px-2 py-1 text-[11px] font-semibold uppercase tracking-wide">{{ __('common.language') }}</p>
        @endunless

        <div @class(['locale-switcher__list' => $compact, 'space-y-0.5' => ! $compact])>
            @foreach (['tr' => 'common.turkish', 'en' => 'common.english'] as $locale => $label)
                <form method="POST" action="{{ route('locale.change') }}" class="locale-switcher__form">
                    @csrf
                    <input type="hidden" name="locale" value="{{ $locale }}">
                    <button
                        type="submit"
                        role="option"
                        @class([
                            'locale-switcher__option',
                            'locale-switcher__option--compact' => $compact,
                            'locale-switcher__option--active' => $compact && $currentLocale === $locale,
                            'flex w-full items-center justify-between rounded-lg px-2.5 py-2 text-left text-sm transition text-[#374151] hover:bg-[#F7F7FC]' => ! $compact,
                        ])
                        @if ($currentLocale === $locale) aria-selected="true" @endif
                    >
                        <span class="locale-switcher__label">{{ __($label) }}</span>
                        <span class="locale-switcher__check" aria-hidden="true">
                            @if ($currentLocale === $locale)
                                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                                </svg>
                            @endif
                        </span>
                    </button>
                </form>
            @endforeach
        </div>
    </div>
</div>