import { NavLink, Navigate, Route, Routes } from 'react-router-dom'
import { SourceButton, ThemeToggle } from '@shared/ui'
import { Compare } from './pages/Compare'
import { Line } from './pages/Line'
import { Overview } from './pages/Overview'

export function App() {
  return (
    <>
      <header className="topbar">
        <div className="inner">
          <NavLink to="/" className="brand">
            线路质量
          </NavLink>
          <nav className="topnav">
            <NavLink to="/" end className={({ isActive }) => (isActive ? 'active' : '')}>
              总览
            </NavLink>
            <NavLink to="/compare" className={({ isActive }) => (isActive ? 'active' : '')}>
              对比
            </NavLink>
            <a href="/admin/">管理</a>
          </nav>
          <SourceButton />
          <ThemeToggle />
        </div>
      </header>
      <Routes>
        <Route path="/" element={<Overview />} />
        <Route path="/line/:id" element={<Line />} />
        <Route path="/compare" element={<Compare />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </>
  )
}