import { Routes, Route, NavLink } from "react-router-dom";
import { Overview } from "./pages/Overview";
import { StressMatrix } from "./pages/StressMatrix";

export function App() {
  return (
    <div className="layout">
      <nav className="sidebar">
        <h1>DeskClaw</h1>
        <NavLink to="/" className={({ isActive }) => (isActive ? "active" : "")}>
          Overview
        </NavLink>
        <NavLink
          to="/stress-matrix"
          className={({ isActive }) => (isActive ? "active" : "")}
        >
          Stress Matrix
        </NavLink>
      </nav>
      <main className="main">
        <Routes>
          <Route path="/" element={<Overview />} />
          <Route path="/stress-matrix" element={<StressMatrix />} />
        </Routes>
      </main>
    </div>
  );
}
