@props([
    'variant' => 'default',
])

@php
    $languages = available_languages();
    $currentLang = current_language_code();
    $currentLanguage = $languages->firstWhere('code', $currentLang);
    $languageCollapseId = 'offcanvas-language-collapse';

    $wrapperClass = $variant === 'offcanvas'
        ? 'language-select-offcanvas w-full'
        : 'navbar-other !ml-5 header-language-desktop !hidden lg:!flex xl:!flex shrink-0';

    $linkClass = 'nav-link dropdown-item dropdown-toggle xl:!text-[.85rem] lg:!text-[.85rem] max-lg:!text-[1.05rem]';
@endphp

@if($variant === 'offcanvas')
    <div {{ $attributes->merge(['class' => $wrapperClass]) }}>
        <button
            type="button"
            class="language-select-offcanvas__toggle w-full flex items-center justify-between uppercase !text-[1.05rem] !text-white hover:!text-white focus:!text-white bg-transparent border-0 p-0"
            data-bs-toggle="collapse"
            data-bs-target="#{{ $languageCollapseId }}"
            aria-expanded="false"
            aria-controls="{{ $languageCollapseId }}"
        >
            <span>
                @if($currentLanguage)
                    {{ strtoupper($currentLanguage->code) }}
                @else
                    {{ strtoupper($currentLang) }}
                @endif
            </span>
            <i class="uil uil-angle-down language-select-offcanvas__icon text-[1.1rem] !text-[#e31e24] transition-transform duration-200"></i>
        </button>

        <div id="{{ $languageCollapseId }}" class="collapse language-select-offcanvas__panel">
            <ul class="navbar-nav flex-col !ps-0 !mt-2 !mb-0 uppercase">
                @foreach($languages as $language)
                    <li class="nav-item">
                        <a
                            class="nav-link !py-[0.35rem] !px-0 !text-[0.95rem] {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '!text-white/85 hover:!text-white' }}"
                            href="{{ route('language.switch', $language->code) }}"
                        >
                            {{ strtoupper($language->code) }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
@else
    <div {{ $attributes->merge(['class' => $wrapperClass]) }}>
        <ul class="navbar-nav !flex-row !items-center">
            <li class="nav-item dropdown language-select uppercase group">
                <a class="{{ $linkClass }}" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    @if($currentLanguage)
                        {{ strtoupper($currentLanguage->code) }}
                    @else
                        {{ strtoupper($currentLang) }}
                    @endif
                </a>
                <ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
                    @foreach($languages as $language)
                        <li class="nav-item">
                            <a class="dropdown-item hover:!text-[#747ed1] {{ $language->code === $currentLang ? 'active font-bold !text-[#e31e24]' : '' }}"
                               href="{{ route('language.switch', $language->code) }}">
                                {{ strtoupper($language->code) }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </li>
        </ul>
    </div>
@endif