import { cn } from '@/lib/utils';
import type { Language } from '@/lib/i18n';

interface LanguageSelectorProps {
  currentLang: Language;
  onLangChange: (lang: Language) => void;
}

const languages: { code: Language; label: string; title: string }[] = [
  { code: 'nl', label: 'NL', title: 'Nederlands' },
  { code: 'ar', label: 'AR', title: 'العربية' },
  { code: 'en', label: 'EN', title: 'English' },
];

export function LanguageSelector({ currentLang, onLangChange }: LanguageSelectorProps) {
  return (
    <div className="fixed top-4 right-4 rtl:right-auto rtl:left-4 flex gap-2 z-50">
      {languages.map(({ code, label, title }) => (
        <button
          key={code}
          onClick={() => onLangChange(code)}
          title={title}
          className={cn(
            'px-3 py-2 text-xs font-semibold font-mono uppercase tracking-wide',
            'backdrop-blur-md bg-black/20 border border-white/10 rounded-xl',
            'transition-all duration-200 hover:scale-105',
            currentLang === code
              ? 'border-white text-white shadow-[0_0_15px_rgba(255,255,255,0.2)] bg-white/10'
              : 'text-gray-500 hover:border-white/50 hover:text-white hover:bg-white/5'
          )}
        >
          {label}
        </button>
      ))}
    </div>
  );
}
