import { notFound } from "next/navigation";
import Link from "next/link";
import { getItem, items } from "../../lib/data";

export function generateStaticParams() {
  return items.map((it) => ({ id: it.id }));
}

export default async function ItemPage({ params }) {
  const { id } = await params;
  const item = getItem(id);
  if (!item) return notFound();

  return (
    <section style={{ padding: "60px 0" }}>
      <Link href="/" style={{ color: "var(--accent)", fontSize: 14, fontWeight: 600 }}>
        ← Volver al inicio
      </Link>
      <div style={{ marginTop: 24, borderRadius: 18, overflow: "hidden", border: "1px solid var(--line)" }}>
        <div className="thumb" style={{ aspectRatio: "16/9" }}>
          <img src={item.img} alt={item.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      </div>
      <h1 style={{ fontSize: "clamp(28px,4vw,42px)", fontWeight: 800, marginTop: 28 }}>{item.name}</h1>
      <span className="tag" style={{ marginTop: 12, marginBottom: 16, display: "inline-block" }}>{item.tag}</span>
      <p style={{ fontSize: 17, color: "var(--muted)", lineHeight: 1.7, maxWidth: 680 }}>{item.description}</p>
    </section>
  );
}