import Link from "next/link";
import { notFound } from "next/navigation";
import { getProduct, products } from "../../lib/products";
export function generateStaticParams() { return products.map((p) => ({ id: p.id })); }
export default async function ProductPage({ params }) {
  const { id } = await params;
  const p = getProduct(id);
  if (!p) return notFound();
  return (
    <section className="detail">
      <Link href="/" className="back">Volver</Link>
      <div className="detail-grid">
        <div className="detail-thumb"><img src={p.img} alt={p.name} /></div>
        <div className="detail-info">
          <span className="chip">{p.category}</span>
          <h1>{p.name}</h1>
          <p className="price big">${p.price}</p>
          <p className="desc">{p.desc}</p>
          <div className="actions">
            <button className="btn btn-primary">Agregar al carrito</button>
            <button className="btn btn-ghost">Guardar</button>
          </div>
          <ul className="perks"><li>Envio gratis en 24-48h</li><li>Garantia de 2 anos</li><li>Devolucion sin costo 30 dias</li></ul>
        </div>
      </div>
    </section>
  );
}