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

function HomePage() {
  return <h1>Home</h1>;
}

function AboutPage() {
  return <h1>About</h1>;
}

function ContactPage() {
  return <h1>Contact</h1>;
}

function NavBar() {
  const linkStyle = ({ isActive }) => ({
    fontWeight: isActive ? "bold" : "normal",
    color: isActive ? "#61dafb" : "inherit",
  });

  return (
    <nav>
      <NavLink to="/" style={linkStyle}>Home</NavLink>
      <NavLink to="/about" style={linkStyle}>About</NavLink>
      <NavLink to="/contact" style={linkStyle}>Contact</NavLink>
    </nav>
  );
}

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

/*
  Notes:
  - NavLink's style prop accepts a function receiving { isActive },
    letting the active link's appearance differ without manually
    comparing the current URL anywhere.
  - All three pages render inside the same BrowserRouter, with NavBar
    staying mounted and visible regardless of which page is active.
*/