import React from "react";
import Link from "component/link";

const SubHeader = props => {
  const { subLinks, currentPage, navigate, modifier } = props;

  const links = [];

  for (let link of Object.keys(subLinks)) {
    links.push(
      <Link
        onClick={event => navigate(`/${link}`, event)}
        key={link}
        className={
          link == currentPage ? "sub-header-selected" : "sub-header-unselected"
        }
      >
        {subLinks[link]}
      </Link>
    );
  }

  return (
    <nav
      className={"sub-header" + (modifier ? " sub-header--" + modifier : "")}
    >
      {links}
    </nav>
  );
};

export default SubHeader;