"use strict";

const React = require("react");
const classnames = require("classnames");

const {LocalsContext} = require("../../packages/express-async-react");
const isUnderPrefix = require("../../util/is-under-prefix");

module.exports = function MenuItem({ path, children }) {
	let {currentPath} = React.useContext(LocalsContext);
	let isActive = isUnderPrefix(path, currentPath);

	return (
		<div className={classnames("menuItem", {active: isActive})}>
			<a href={path}>
				{children}
			</a>
		</div>
	);
};