import { NavLink, Route, Routes } from 'react-router-dom'
import StartlistPage from './pages/StartlistPage.jsx'
import ReviewPage from './pages/ReviewPage.jsx'
import ResultsPage from './pages/ResultsPage.jsx'
import PassagesPage from './pages/PassagesPage.jsx'
import './App.css'

function Nav() {
  const linkClass = ({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')
  return (
    <nav className="navbar">
      <span className="navbar-brand">Timing Admin</span>
      <NavLink to="/" className={linkClass} end>Startliste</NavLink>
      <NavLink to="/passages" className={linkClass}>Passeringer</NavLink>
      <NavLink to="/review" className={linkClass}>Gjennomgang</NavLink>
      <NavLink to="/results" className={linkClass}>Resultater</NavLink>
    </nav>
  )
}

export default function App() {
  return (
    <>
      <Nav />
      <main className="container">
        <Routes>
          <Route path="/" element={<StartlistPage />} />
          <Route path="/passages" element={<PassagesPage />} />
          <Route path="/review" element={<ReviewPage />} />
          <Route path="/results" element={<ResultsPage />} />
        </Routes>
      </main>
    </>
  )
}