import React from "react";

import { NavItem, Wrapper } from "../styles/TopBarStyle";
import { useNavigate } from "react-router-dom";

const TopBar: React.FC = () => {
  const navigate = useNavigate();
  const handleClick = (loc:string) => navigate(loc);

  const locations:Array<string> = ["/", "about"];

  return (
    <>
      <Wrapper>
        {locations.map((location) => 
          <NavItem onClick={() => handleClick(location)}>{location}</NavItem>
        )}
      </Wrapper>
    </>);
};
export default TopBar;