import { useState } from 'preact/hooks'
import { NavLink } from 'react-router-dom'

function Navbar() {
  const [ show, setShow ] = useState(false);

  const handleNavClick = () : void => {
    setShow(false)
  }

  return (
    <nav class="navbar navbar-expand-sm bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Math Practice</a>
        <button class="navbar-toggler" type="button" onClick={()=>setShow(!show)} aria-expanded={show} aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div className={`collapse navbar-collapse ${show ? "show" : ""}`} id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <NavLink to="/gcf" title="Greatest Common Factor" onClick={handleNavClick} className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>GCF</NavLink>
            </li>
            <li class="nav-item">
              <NavLink to="/lcm" title="Least Common Multiple" onClick={handleNavClick} className={({ isActive, isPending }) => "nav-link " + (isPending ? "" : isActive ? "active" : "")}>LCM</NavLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  )
}

export default Navbar;