import "./ChangeLanguage.scss";
import Image from "next/image";
import lang_icon from "./icons/lang-icon.svg";
import chevron_icon from "./icons/chevron-down-icon.svg";
import check_icon from "./icons/check-icon.svg";
import { useState } from "react";

const ChangeLanguage = () => {
  const [lang, setLang] = useState<string>("ru");
  const [popUp, setPopUp] = useState<boolean>(false);
  const languages = [
    { id: "ru", language: "Русский" },
    { id: "kg", language: "Кыргыз" },
    { id: "en", language: "English" },
  ];
  return (
    <div className="change-language">
      <button
        onClick={() => setPopUp((prev) => !prev)}
        className="change-language__btn"
      >
        <Image src={lang_icon} alt="Language Icon" />
        <Image src={chevron_icon} alt="Chevron Down Icon" />
      </button>
      {popUp && (
        <ul className="change-language__popUp">
          {languages.map((language) => (
            <li
              key={language.id}
              className={
                lang === language.id
                  ? "change-language__item_active"
                  : "change-language__item"
              }
            >
              <button onClick={() => setLang(language.id)}>
                {language.language}
                {language.id === lang ? (
                  <Image src={check_icon} alt="Check Icon" />
                ) : null}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ChangeLanguage;