import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslations } from "next-intl";
import styles from "./LocaleSwitcher.module.css";
import LanguageIcon from "@mui/icons-material/Language";

export default function LocaleSwitcher() {
  const t = useTranslations("LocaleSwitcher");
  const { locale, locales, asPath, query } = useRouter();

  const otherLocale = locales?.find((cur) => cur !== locale);

  // Create the new path for the locale switch, preserving query parameters
  const newPath = {
    pathname: asPath.split("?")[0], // remove query params from path
    query: { ...query, locale: otherLocale },
  };

  return (
    <Link href={newPath} locale={otherLocale} className={styles.switchButton}>
      {/* <LanguageIcon style={{ margin: "1px" }} /> */}
      {t("switchLocale", { locale: otherLocale })}
    </Link>
  );
}
