import { useState } from 'react';
import { AppShell, type PageKey } from './layout/AppShell';
import { Dashboard } from './pages/Dashboard';
import { History } from './pages/History';
import { Mileage } from './pages/Mileage';
import { Quality } from './pages/Quality';
import { Realtime } from './pages/Realtime';
import { VehicleDetail } from './pages/VehicleDetail';
import { Vehicles } from './pages/Vehicles';

const pages: Record<PageKey, JSX.Element> = {
  dashboard: <Dashboard />,
  vehicles: <Vehicles />,
  realtime: <Realtime />,
  detail: <VehicleDetail />,
  history: <History />,
  mileage: <Mileage />,
  quality: <Quality />
};

export default function App() {
  const [activePage, setActivePage] = useState<PageKey>('dashboard');
  return (
    <AppShell activePage={activePage} onChange={setActivePage}>
      {pages[activePage]}
    </AppShell>
  );
}