import "./NavLanguage.scss";
import Image from "next/image";
import { useState } from "react";
import globus from "./icons/globus.svg";
import chevron from "./icons/chevron-down.svg";
import check from "./icons/check.svg";

const NavLanguage = () => {
  const [language, setLanguage] = useState<string>("ru");
  const [openMenu, setOpenMenu] = useState<boolean>(false);
  const LANGUAGES = [
    { id: 1, language: "Русский", index: "ru" },
    { id: 2, language: "Кыргызча", index: "kg" },
    { id: 3, language: "English", index: "en" },
  ];
  return (
    <div className="nav-language">
      <button
        onClick={() => setOpenMenu((prev) => !prev)}
        className="nav-language__btn"
      >
        <Image src={globus} alt="globus icon" />
        <Image src={chevron} alt="chevron icon" />
      </button>
      {openMenu && (
        <div className="nav-language__select">
          {LANGUAGES.map((lang) => (
            <button
              className={`nav-language__option${
                language === lang.index ? "_active" : ""
              }`}
              onClick={() => setLanguage(lang.index)}
              key={lang.id}
            >
              {lang.language}
              {lang.index === language ? (
                <Image src={check} alt="check icon" />
              ) : null}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

export default NavLanguage;
