import type { Metadata } from "next"; import Image from "next/image"; import Link from "next/link"; import { notFound } from "next/navigation"; import { prisma } from "@/lib/prisma"; import { money,parseImages } from "@/lib/utils"; import { ProductCard } from "@/components/product-card";
export const revalidate=3600;
async function getProduct(slug:string){try{return await prisma.product.findUnique({where:{slug},include:{category:true}})}catch{return null}}
export async function generateMetadata({params}:{params:{slug:string}}):Promise<Metadata>{const p=await getProduct(params.slug);return {title:p?.name||"Product",description:p?.description.slice(0,155)}}
export default async function Product({params}:{params:{slug:string}}){const product=await getProduct(params.slug);if(!product)notFound();const images=parseImages(product.images);const specs=(product.specs||{}) as Record<string,string>;const related=await prisma.product.findMany({where:{categoryId:product.categoryId,id:{not:product.id},isActive:true},include:{category:true},take:4});return <><section className="section"><div className="container grid gap-10 lg:grid-cols-2"><div><div className="relative h-96 overflow-hidden rounded-2xl bg-slate-100"><Image fill src={images[0]||"https://images.unsplash.com/photo-1557597774-9d273605dfa9?auto=format&fit=crop&w=900&q=80"} alt={product.name} className="object-cover"/></div><div className="mt-3 flex gap-3">{images.slice(1).map(x=><div className="relative h-20 w-20 overflow-hidden rounded-lg" key={x}><Image fill src={x} alt="Product view" className="object-cover"/></div>)}</div></div><div><div className="eyebrow">{product.category.name}</div><h1 className="mt-3 text-4xl font-black">{product.name}</h1><p className="mt-4 text-3xl font-black text-blue-700">{money(String(product.price))}</p><p className="mt-6 leading-7 text-muted">{product.description}</p><div className="mt-5 text-sm text-muted">{product.brand&&<span className="mr-4"><b>Brand:</b> {product.brand}</span>}{product.sku&&<span><b>SKU:</b> {product.sku}</span>}</div><Link className="btn-primary mt-7" href={`/get-quote?product=${product.slug}`}>Request a Quote</Link></div></div></section>{Object.keys(specs).length>0&&<section className="pb-16"><div className="container"><h2 className="mb-5 text-2xl font-black">Technical specifications</h2><div className="max-w-3xl overflow-hidden rounded-xl border">{Object.entries(specs).map(([k,v])=><div className="grid grid-cols-2 border-b p-4 text-sm last:border-0" key={k}><b>{k}</b><span>{String(v)}</span></div>)}</div></div></section>}{related.length>0&&<section className="section bg-slate-50"><div className="container"><h2 className="mb-8 text-3xl font-black">Related products</h2><div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">{related.map(p=><ProductCard key={p.id} product={p}/>)}</div></div></section>}</>}