// (c) 2025 TWWIM UG. All rights reserved.

import { useTranslation } from '@/i18n/TranslationProvider';
import { locales, localeLabels, type Locale } from '@/i18n/config';

const localeFlags: Record<Locale, string> = {
  de: '\u{1F1E9}\u{1F1EA}',
  en: '\u{1F1EC}\u{1F1E7}',
};

export function LanguageSwitcher() {
  const { locale, setLocale } = useTranslation();

  return (
    <div className="flex items-center gap-1">
      {locales.map((l) => (
        <button
          key={l}
          onClick={() => setLocale(l as Locale)}
          className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded transition-colors ${
            locale === l
              ? 'bg-primary/20 text-primary'
              : 'text-slate-400 hover:text-slate-200'
          }`}
        >
          <span className="text-sm leading-none">{localeFlags[l]}</span>
          {localeLabels[l]}
        </button>
      ))}
    </div>
  );
}