@props(['variant' => 'dark'])

<div class="flex items-center gap-2">
    <a
        href="{{ route('language.switch', 'ar') }}"
        @class([
            'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
            'bg-active text-white font-bold' => app()->getLocale() === 'ar',
            'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'dark',
            'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
        ])
        data-test="language-switch-ar"
    >
        العربية
    </a>
    <span @class([
        'text-cta/50' => $variant === 'dark',
        'text-body/30' => $variant === 'light',
    ])>|</span>
    <a
        href="{{ route('language.switch', 'en') }}"
        @class([
            'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
            'bg-active text-white font-bold' => app()->getLocale() === 'en',
            'text-off-white hover:text-cta hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'dark',
            'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'en' && $variant === 'light',
        ])
        data-test="language-switch-en"
    >
        English
    </a>
</div>