/**
 * Cached page — same content as /medium but with response caching enabled.
 * Measures the response cache fast path vs uncached rendering.
 */
import { useResponseCache } from "@lazarv/react-server";

function ProductCard({ id }) {
  return (
    <article>
      <div style={{ background: "#f0f0f0", height: 200, width: "100%" }} />
      <h3>Product {id}</h3>
      <p>
        High-quality item with excellent features. Perfect for everyday use.
        Rating: {(id % 5) + 1}/5 stars.
      </p>
      <div>
        <span>${((id * 17 + 29) % 200) + 9.99}</span>
        {id % 3 === 0 && <span> (On Sale)</span>}
      </div>
      <button>Add to Cart</button>
    </article>
  );
}

export default function Cached() {
  useResponseCache(60000);

  const products = Array.from({ length: 50 }, (_, i) => i + 1);
  return (
    <main>
      <header>
        <h1>Products (Cached)</h1>
        <p>Showing {products.length} items</p>
      </header>
      <div>
        {products.map((id) => (
          <ProductCard key={id} id={id} />
        ))}
      </div>
    </main>
  );
}