import React from 'react';

import { NavLink } from 'react-router-dom';

import { FormattedMessage } from 'react-intl';

const MainNav = () => (

  <nav className="navbar navbar-expand-lg navbar-light bg-light mb-3">

    <ul className="navbar-nav mr-auto">

      <li className="nav-item"><NavLink exact className="nav-link" activeClassName="active" to="/" replace><FormattedMessage id="main-nav.menu.documents" defaultMessage="Documents" /></NavLink></li>

      <li className="nav-item"><NavLink className="nav-link" activeClassName="active" to="/glossary" replace><FormattedMessage id="main-nav.menu.glossary" defaultMessage="Glossary" /></NavLink></li>

      <li className="nav-item"><NavLink className="nav-link" activeClassName="active" to="/charts" replace><FormattedMessage id="main-nav.menu.charts" defaultMessage="Charts" /></NavLink></li>

    </ul>

  </nav>

);

export default MainNav;