import { notFound } from "next/navigation"
import type { Metadata } from "next"
import { products, getProductById } from "@/data/products"
import { ProductDetail } from "@/features/products/ProductDetail"
import { RelatedProducts } from "@/features/products/RelatedProducts"

type Props = {
  params: Promise<{ id: string }>
}

export async function generateStaticParams() {
  return products.map((p) => ({ id: p.id }))
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params
  const product = getProductById(id)
  if (!product) return {}
  return {
    title: product.name,
    description: product.description,
  }
}

export default async function ProductPage({ params }: Props) {
  const { id } = await params
  const product = getProductById(id)

  if (!product) notFound()

  const related = products
    .filter((p) => p.category === product.category && p.id !== product.id)
    .slice(0, 4)

  return (
    <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
      <ProductDetail product={product} />
      <RelatedProducts products={related} />
    </div>
  )
}