// src/App.jsx
import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";

function Sidebar() {
  return (
    <nav>
      <Link to="/dashboard/profile">Profile</Link>
      <Link to="/dashboard/settings">Settings</Link>
    </nav>
  );
}

function DashboardLayout() {
  return (
    <div style={{ display: "flex" }}>
      <Sidebar />
      <main>
        <Outlet />
      </main>
    </div>
  );
}

function ProfilePage() {
  return <h2>Profile page</h2>;
}

function SettingsPage() {
  return <h2>Settings page</h2>;
}

function NotFoundPage() {
  return <h2>404 — Page not found</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={<DashboardLayout />}>
          <Route path="profile" element={<ProfilePage />} />
          <Route path="settings" element={<SettingsPage />} />
        </Route>
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

/*
  Notes:
  - DashboardLayout (and its Sidebar) renders for both
    /dashboard/profile and /dashboard/settings — only the content
    inside <Outlet /> changes between the two.
  - The catch-all path="*" route is listed last, so it only matches
    when nothing more specific (like /dashboard/profile) already did.
*/