// src/AppRouter.tsx
import { Navigate, Route, Routes } from 'react-router-dom';
import App from './App'; // your layout component (has <Outlet />)
import Home from './pages/Home';
import Network from './pages/Network';
import Scripting from './pages/Scripting';
import Sniffing from './pages/Sniffing';
import { PATHS } from './routes';

export default function AppRouter() {
  return (
    <Routes>
      {/* App is the top-level layout; Outlet renders the active child route */}
      <Route path={PATHS.ROOT} element={<App />}>
        {/* When the user hits '/', redirect to '/home' */}
        <Route index element={<Navigate to={PATHS.HOME} replace />} />

        {/* Child routes - these render inside App's <Outlet /> */}
        <Route path={PATHS.HOME.slice(1)} element={<Home />} />
        <Route path={PATHS.NETWORK.slice(1)} element={<Network />} />
        <Route path={PATHS.SNIFFING.slice(1)} element={<Sniffing />} />
        <Route path={PATHS.SCRIPTING.slice(1)} element={<Scripting />} />

        {/* Fallback (renders inside layout too) */}
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  );
}

/** simple 404 rendered inside the layout */
function NotFound() {
  return (
    <div style={{ padding: 16 }}>
      <h2>404 – Not Found</h2>
      <p>The requested page does not exist.</p>
    </div>
  );
}