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;