import * as React from "react";
import { Route, Link } from "react-router-dom";

type Props = {
  to: string;
  label: string;
  match?: string;
  activeOnlyWhenExact?: boolean;
};

class PrimaryNavigationLink extends React.Component<Props> {
  renderLink = (route: any) => {
    const { to, label } = this.props;
    return (
      <li className={route.match ? "is-active" : ""}>
        <Link to={to}>{label}</Link>
      </li>
    );
  };

  render() {
    const { to, match, activeOnlyWhenExact } = this.props;
    const path = match ? match : to;
    return <Route path={path} exact={activeOnlyWhenExact} children={this.renderLink} />;
  }
}

export default PrimaryNavigationLink;