import { useTranslation } from "react-i18next";
import type { AppLocale } from "@/i18n";
import { setLangInUrl } from "@/lib/urlLang";

export default function LanguageSwitchButton({
  className,
}: {
  className?: string;
}) {
  const { i18n, t } = useTranslation();
  const current = (i18n.language.startsWith("ru") ? "ru" : "en") as AppLocale;

  function handleClick() {
    const next: AppLocale = current === "ru" ? "en" : "ru";
    void i18n.changeLanguage(next);
    setLangInUrl(next);
  }

  return (
    <button
      type="button"
      className={`btnm bg-[#37393B99] active:bg-[#37393B80]
        lg:px-[1.667vw] lg:py-[1.181vw] lg:rounded-[0.833vw]
        md:px-[2.604vw] md:py-[1.302vw] md:rounded-[1.563vw]
        px-[5.556vw] py-[2.778vw] rounded-[3.333vw]
        ${className ?? ""}
      `}
      onClick={handleClick}
      aria-label={t("languageSwitcher.ariaLabel")}
    >
      {current === "ru" ? "RU" : "EN"}
    </button>
  );
}
