import { Fragment, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import NavBarButton from "./NavBarButton";

function NavBar() {
  const navigate = useNavigate();

  const navigateHandler = useCallback(
    (type) => {
      navigate(`/map/${type}`, { replace: true });
    },
    [navigate]
  );

  return (
    <Fragment>
      <div className="nav-bar-first">
        <NavBarButton
          text={"数据集成和共享"}
          onClick={() => navigateHandler(1)}
        />
        <NavBarButton
          text={"随机森林方法在线计算案例"}
          onClick={() => navigateHandler(1)}
        />
        <NavBarButton
          text={"过去千年气候重建数据同化"}
          onClick={() => navigateHandler("climateReconDataAssim")}
        />
        <NavBarButton
          text={"北极海冰预报"}
          onClick={() => navigateHandler(1)}
        />
        <NavBarButton
          text={"北极航线智能规划"}
          onClick={() => navigateHandler(1)}
        />
      </div>
      <div className="nav-bar-second">
        <div className="nav-bar-title">三极联动</div>
        <div className="nav-bar-container">
          <NavBarButton
            text={"两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温"}
            onClick={() => navigateHandler(1)}
          />
          <NavBarButton
            text={"两极协同—南极涛动有效调节青藏高原降水和加热"}
            onClick={() => navigateHandler(2)}
          />
          <NavBarButton
            text={"两极协同—连接南极和北极的热带大西洋经向模的媒介作用"}
            onClick={() => navigateHandler(3)}
          />
          <NavBarButton
            text={"三极联动影响青藏高原上层温度"}
            onClick={() => navigateHandler(4)}
          />
          <NavBarButton
            text={"三极联动影响东亚夏季风"}
            onClick={() => navigateHandler(5)}
          />
          <NavBarButton
            text={"三极冰盖/冰川表面冰雪冻融对比关联与科学认知"}
            onClick={() => navigateHandler(6)}
          />
        </div>
      </div>
    </Fragment>
  );
}

export default NavBar;