<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-warm-gray text-charcoal font-bold' => app()->getLocale() === 'ar',
            'text-off-white hover:text-warm-gray' => app()->getLocale() !== 'ar',
        ])
        data-test="language-switch-ar"
    >
        العربية
    </a>
    <span class="text-warm-gray/50">|</span>
    <a
        href="{{ route('language.switch', 'en') }}"
        @class([
            'text-sm px-2 py-1 rounded transition-colors min-h-[32px] flex items-center',
            'bg-warm-gray text-charcoal font-bold' => app()->getLocale() === 'en',
            'text-off-white hover:text-warm-gray' => app()->getLocale() !== 'en',
        ])
        data-test="language-switch-en"
    >
        English
    </a>
</div>
