import { NavLink, Navigate, Route, Routes } from 'react-router-dom';
import { DashboardPage } from './routes/DashboardPage';
import { DriverPage } from './routes/DriverPage';

const navClass = ({ isActive }: { isActive: boolean }) =>
  `rounded-lg px-3 py-2 text-sm font-medium transition ${
    isActive ? 'bg-indigo-600 text-white' : 'bg-white text-slate-700 hover:bg-slate-100'
  }`;

function App() {
  return (
    <div className="min-h-screen bg-slate-100 text-slate-900">
      <header className="border-b border-slate-200 bg-white/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-4 py-4 sm:px-6 lg:px-8">
          <div>
            <h1 className="text-xl font-semibold">Socket Tracking Simulator</h1>
            <p className="text-sm text-slate-500">Test driver updates and live dashboard map before mobile integration</p>
          </div>
          <nav className="flex gap-2">
            <NavLink to="/driver" className={navClass}>
              Driver Simulator
            </NavLink>
            <NavLink to="/dashboard" className={navClass}>
              Dashboard Map
            </NavLink>
          </nav>
        </div>
      </header>

      <main className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
        <Routes>
          <Route path="/driver" element={<DriverPage />} />
          <Route path="/dashboard" element={<DashboardPage />} />
          <Route path="*" element={<Navigate to="/driver" replace />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;