"use client";

import { useTranslation, Locale } from '@/lib/i18n/context';

// Kompakter Sprachumschalter (DE/EN als zwei Buttons statt <select>, da nur
// zwei Optionen - ein Dropdown waere hier unnoetiger Interaktions-Overhead).
// Wird an BEIDEN Einstiegspunkten der App eingebunden: auf der Startseite
// (app/page.tsx) UND im needsJoin-Screen von app/session/[code]/page.tsx -
// letzteres ist noetig, weil eingeladene Personen ueber einen Share-Link
// direkt in eine Session springen koennen, OHNE die Startseite je zu sehen.
export function LanguageSwitch({ className = '' }: { className?: string }) {
  const { locale, setLocale } = useTranslation();

  function select(next: Locale) {
    if (next !== locale) setLocale(next);
  }

  return (
    <div
      className={`inline-flex items-center gap-0.5 rounded-full border border-white/10 bg-neutral-900/70 backdrop-blur-md p-0.5 text-xs font-semibold ${className}`}
      role="group"
      aria-label="Sprache wählen / Choose language"
    >
      <button
        type="button"
        onClick={() => select('de')}
        aria-pressed={locale === 'de'}
        className={`px-2.5 py-1 rounded-full transition-colors ${
          locale === 'de' ? 'bg-yumder-pink text-white' : 'text-neutral-400 hover:text-neutral-200'
        }`}
      >
        DE
      </button>
      <button
        type="button"
        onClick={() => select('en')}
        aria-pressed={locale === 'en'}
        className={`px-2.5 py-1 rounded-full transition-colors ${
          locale === 'en' ? 'bg-yumder-pink text-white' : 'text-neutral-400 hover:text-neutral-200'
        }`}
      >
        EN
      </button>
    </div>
  );
}