import type { Metadata } from "next"; import Link from "next/link"; import { prisma } from "@/lib/prisma"; import { ProductCard } from "@/components/product-card"; import { PageHero } from "@/components/page-hero";
export const metadata:Metadata={title:"Security Cameras & CCTV Products",description:"Browse professional CCTV cameras, NVR systems, and surveillance accessories."};
export default async function Products({searchParams}:{searchParams:{category?:string;brand?:string;page?:string}}){const page=Math.max(1,Number(searchParams.page)||1),take=8;const where={isActive:true,...(searchParams.category?{category:{slug:searchParams.category}}:{}),...(searchParams.brand?{brand:searchParams.brand}:{})};let products:any[]=[],categories:any[]=[],count=0;try{[products,categories,count]=await Promise.all([prisma.product.findMany({where,include:{category:true},skip:(page-1)*take,take}),prisma.category.findMany(),prisma.product.count({where})])}catch{}return <><PageHero eyebrow="Professional equipment" title="Security built around you." copy="Explore dependable surveillance equipment selected and supported by CCTV professionals."/><section className="section"><div className="container"><form className="mb-8 grid gap-3 rounded-2xl bg-slate-50 p-4 sm:grid-cols-[1fr_1fr_auto]"><select className="field" name="category" defaultValue={searchParams.category}><option value="">All categories</option>{categories.map(c=><option key={c.id} value={c.slug}>{c.name}</option>)}</select><input className="field" name="brand" defaultValue={searchParams.brand} placeholder="Filter by brand"/><button className="btn-dark">Apply filters</button></form>{products.length?<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">{products.map(p=><ProductCard key={p.id} product={p}/>)}</div>:<div className="rounded-2xl bg-slate-50 p-10 text-center text-muted">No products found. Add products in the admin panel or adjust your filters.</div>}<div className="mt-8 flex justify-center gap-2">{Array.from({length:Math.ceil(count/take)},(_,i)=><Link className={`rounded-lg px-4 py-2 text-sm font-bold ${page===i+1?"bg-brand":"bg-slate-100"}`} href={`?page=${i+1}`} key={i}>{i+1}</Link>)}</div></div></section></>}