import classNames from "classnames";
import Image from "next/image";
import { useRouter } from "next/router";
import React from "react";
import HeaderVariant from "../../../enums/HeaderVariant";

import langaugeIcon from "../../../public/icons/language.svg";
import langaugeIcon2 from "../../../public/icons/language2.svg";

import styles from "./LanguageSwitcher.module.scss";

interface Props {
  iconVariant: `${HeaderVariant}`;
  onToggle(): void;
}

const LanguageSwitcher = ({ iconVariant, onToggle }: Props) => {
  const router = useRouter();

  const { locale, locales, asPath } = router;

  const unselectedLocals = locales?.filter((l) => l !== locale) || [];

  const firstLocal = unselectedLocals[0];

  return (
    <div className={classNames(styles.languageSwitcher)}>
      <button onClick={onToggle}>
        <div className="flex items-center">
          <div className="language-icon ltr:pr-2 rtl:pl-2">
            <Image
              src={iconVariant === HeaderVariant.Dark ? langaugeIcon : langaugeIcon2}
              alt=""
              priority
            />
          </div>

          <a
            className={classNames({ "pb-1": firstLocal === "ar" })}
            href={`/${firstLocal}/${asPath}`}
          >
            {firstLocal === "ar" ? "عربي" : "English"}
          </a>
        </div>
      </button>
    </div>
  );
};

export default LanguageSwitcher;