import { changeLocale, SUPPORTED_LOCALES, type SupportedLocale } from '@chat-app/shared/i18n';
import { useTranslation } from 'react-i18next';

const LABELS: Record<SupportedLocale, string> = {
  en: 'EN',
  de: 'DE',
};

export function LanguageSwitcher({ compact = false }: { compact?: boolean }) {
  const { i18n } = useTranslation();
  const current = (i18n.resolvedLanguage ?? i18n.language) as SupportedLocale;

  return (
    <div
      role="group"
      aria-label="Language"
      className={
        'inline-flex items-center rounded-full border border-line bg-surface-2 p-0.5 text-[11px] font-medium ' +
        (compact ? '' : '')
      }
    >
      {SUPPORTED_LOCALES.map((locale) => {
        const active = locale === current;
        return (
          <button
            key={locale}
            type="button"
            aria-pressed={active}
            onClick={() => {
              if (!active) void changeLocale(locale);
            }}
            className={
              'cursor-pointer rounded-full px-2.5 py-1 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
              (active
                ? 'bg-accent/15 text-accent ring-1 ring-accent/30'
                : 'text-fg-muted hover:text-fg')
            }
          >
            {LABELS[locale]}
          </button>
        );
      })}
    </div>
  );
}