import { useI18n, type Lang } from "./context"

const LANGS: Lang[] = ["fr", "en"]

/** Petit sélecteur FR / EN. */
export function LanguageToggle({ className = "" }: { className?: string }) {
  const { lang, setLang } = useI18n()
  return (
    <div className={`flex gap-1 ${className}`}>
      {LANGS.map((l) => (
        <button
          key={l}
          onClick={() => setLang(l)}
          className={`rounded-md px-2 py-1 text-xs font-semibold uppercase transition-colors ${
            lang === l
              ? "bg-primary/10 text-foreground"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          {l}
        </button>
      ))}
    </div>
  )
}