import styles from "./Navbar.module.scss";
import { Modal } from "antd";
import SignupForm from "../BeSeller/index";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { LogoWithText } from "../Icons";
import Logo from "../../assets/logo2.png";
import { useTranslation } from "react-i18next";
import tm from "../../assets/tm.png";
import ru from "../../assets/ru.png";
import en from "../../assets/en.png";

const Navbar = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const navigate = useNavigate();
  const { i18n } = useTranslation();

  const changeLanguage = (langCode) => {
    i18n.changeLanguage(langCode);
    localStorage.setItem("preferredLanguage", langCode);
    window.location.reload();
  };

  const languages = [
    { code: "tk", flag: tm, label: "TM" },
    { code: "ru", flag: ru, label: "RU" },
    { code: "en", flag: en, label: "EN" },
  ];

  const showModal = () => setIsModalVisible(true);
  const handleCancel = () => setIsModalVisible(false);

  return (
    <>
      <header className={styles.navbar}>
        <div className={styles.navbarUp}>
          <div
            style={{
              maxWidth: "1366px",
              display: "flex",
              margin: "0 auto",
              alignItems: "center",
            }}
          >
            <div className={styles.logo}>
              <div
                className={styles.logoContainer}
                onClick={() => navigate("/")}
              >
                <img  src={Logo} alt="" />
              </div>
            </div>
            <div className={styles.langSelector}
             
            >
              {languages.map((lang) => (
                <button
                  key={lang.code}
                  onClick={() => changeLanguage(lang.code)}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    fontSize: "16px",
                    gap: "4px",
                    background:
                      i18n.language === lang.code ? "#f0f0f0" : "transparent",
                    border:
                      i18n.language === lang.code
                        ? "1px solid #d9d9d9"
                        : "1px solid transparent",
                    borderRadius: "4px",
                    padding: "6px 10px",
                    cursor: "pointer",
                    fontWeight: i18n.language === lang.code ? "600" : "400",
                  }}
                >
                  <img
                    src={lang.flag}
                    alt={lang.label}
                    style={{ width: "20px" }}
                  />
                  {lang.label}
                </button>
              ))}
            </div>
            <div
             
            >
              <button className={styles.btn} onClick={showModal}>
                Satyjy bol
              </button>
            </div>
          </div>
        </div>
      </header>
      <Modal
        open={isModalVisible}
        onCancel={handleCancel}
        footer={null}
        width={900}
      >
        <SignupForm />
      </Modal>
    </>
  );
};

export default Navbar;
