import { useTranslation } from "react-i18next";

import { useLocale } from "../i18n/use-locale";
import { focusRing } from "../lib/focus-ring";
import { cn } from "@/lib/utils";

export function LangSwitch() {
  const { t } = useTranslation();
  const { locale, setLocale } = useLocale();
  const base = locale.startsWith("sv") ? "sv" : "en";

  return (
    <div role="group" aria-label={t("common.language")} className="flex gap-1 text-xs">
      {(["sv", "en"] as const).map((lng) => (
        <button
          key={lng}
          type="button"
          onClick={() => setLocale(lng)}
          aria-pressed={base === lng}
          className={cn("rounded-sm px-1", focusRing, base === lng ? "font-bold" : "text-muted-foreground")}
        >
          {lng.toUpperCase()}
        </button>
      ))}
    </div>
  );
}
