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(
    (e) => {
      navigate("/polygon", { replace: true, state: { xx: 1 } });
    },
    [navigate]
  );

  return (
    <div className="nav-bar">
      <NavBarButton
        key={1}
        text={"两极协同-拉布拉多海"}
        onClick={navigateHandler}
      />
      <NavBarButton
        key={2}
        text={"两极协同-南极青藏高原"}
        onClick={navigateHandler}
      />
      <NavBarButton text={"两极协同-大西洋"} onClick={navigateHandler} />
      <NavBarButton text={"三极协同-青藏高原上层"} onClick={navigateHandler} />
      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
    </div>
  );
}

export default NavBar;