import React from 'react'
import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'
import { AutoPage } from './pages/AutoPage'

function Navigation() {
  return (
    <nav className="nav-bar">
      <NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
        Auto
      </NavLink>
      <NavLink to="/webrtc" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
        WebRTC
      </NavLink>
      <NavLink to="/h264" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
        H.264
      </NavLink>
      <NavLink to="/websocket" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
        JPEG
      </NavLink>
    </nav>
  )
}

export default function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <div style={{ paddingTop: '60px' }}>
        <Routes>
          <Route path="/" element={<AutoPage />} />
          <Route path="/webrtc" element={<AutoPage />} />
          <Route path="/h264" element={<AutoPage />} />
          <Route path="/websocket" element={<AutoPage />} />
        </Routes>
      </div>
    </BrowserRouter>
  )
}