import React, { useState } from "react";
import MenuIcon from "@mui/icons-material/Menu";
import CloseIcon from "@mui/icons-material/Close";

import "./style.scss";

const TABS = {
  main: "Главная",
  services: "Услуги",
  news: "Новости",
  contacts: "Контакты",
};

const Header = () => {
  const [activeTab, setActiveTab] = useState("services");
  const [isMenuClosed, setIsMenuClosed] = useState(false);

  return (
    <div className="header">
      <div className="header-container">
        <h1 className="header__title">BodyMindCare</h1>
        <div className="header__tabs">
          {Object.keys(TABS).map((tab) => {
            return (
              <nav
                key={tab}
                onClick={() => {
                  setActiveTab(tab);
                }}
                className={`tabs__${tab} tabs ${
                  activeTab === tab ? "tabs-active" : ""
                }`}
              >
                {TABS[tab]}
              </nav>
            );
          })}
          {isMenuClosed ? (
            <CloseIcon
              className="tabs__menu"
              onClick={() => {
                setIsMenuClosed(false);
              }}
            />
          ) : (
            <MenuIcon
              className="tabs__menu"
              onClick={() => {
                setIsMenuClosed(true);
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default Header;
