import React from "react";
import { globalHistory } from "@reach/router";

import { ROUTES } from "../../constants/routes";
import { NavItem } from "./navitem";

export const NavBar = () => {
  const currentPathName = globalHistory.location.pathname;

  return (
    <nav>
      <ul className="navigation">
        <NavItem to={ROUTES.home} currentPathName={currentPathName}>
          Profile <i className="fa fa-user" />
        </NavItem>
        <NavItem to={ROUTES.portfolio} currentPathName={currentPathName}>
          Portfolio <i className="fa fa-briefcase" />
        </NavItem>
        <NavItem to={ROUTES.resume} currentPathName={currentPathName}>
          Resume <i className="fa fa-file-text" />
        </NavItem>
        <NavItem to={`${ROUTES.blog}`} exact={false} currentPathName={currentPathName}>
          Blog <i className="fa fa-comment" />
        </NavItem>
        <NavItem to={ROUTES.contact} currentPathName={currentPathName}>
          Contact <i className="fa fa-envelope" />
        </NavItem>
      </ul>
    </nav>
  );
};
