import Container from 'react-bootstrap/Container';
import { NavLink } from 'react-router-dom'
import Nav from 'react-bootstrap/Nav';
//import NavItem from 'react-bootstrap/NavItem'
import RBNavbar from 'react-bootstrap/Navbar';
//import NavDropdown from 'react-bootstrap/NavDropdown';

function Navbar() {
  return (
    <RBNavbar expand="lg" className="bg-body-tertiary" sticky="top">
      <Container>
        <RBNavbar.Toggle aria-controls="basic-navbar-nav" />
        <RBNavbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <NavLink to="/gcf" title="Greatest Common Factor" className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>GCF</NavLink>
            <NavLink to="/lcm" title="Least Common Multiple" className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>LCM</NavLink>
          </Nav>
        </RBNavbar.Collapse>
      </Container>
    </RBNavbar>
  );
}

export default Navbar;