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

const products = [
  { id: "1", name: "Keyboard", price: 49.99 },
  { id: "2", name: "Mouse", price: 19.99 },
  { id: "3", name: "Monitor", price: 199.99 },
];

function ProductListPage() {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <Link to={`/product/${product.id}`}>{product.name}</Link>
        </li>
      ))}
    </ul>
  );
}

function ProductDetailPage() {
  const { id } = useParams();
  const product = products.find((p) => p.id === id);

  if (!product) {
    return <p>Product not found.</p>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>${product.price}</p>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ProductListPage />} />
        <Route path="/product/:id" element={<ProductDetailPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

/*
  Notes:
  - useParams() reads the :id segment out of the URL as a string —
    note product.id in the array is also a string ("1") so the
    comparison in .find() lines up correctly.
  - Each product's Link carries its own id into the URL, so
    ProductDetailPage always knows exactly which product to show.
*/