import { Button } from "antd";
import { 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 (
    <div className="nav-bar">
      <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(5)}
      />
      <NavBarButton
        text={"三极协同-东亚夏季风"}
        onClick={() => navigateHandler(5)}
      />
      <NavBarButton
        text={"三极协同-东亚夏季风"}
        onClick={() => navigateHandler(5)}
      />
    </div>
  );
}

export default NavBar;
