Build a Product Page

// app/products/[slug]/page.tsx
import dash from "@/lib/dash"
import { VariationPicker } from "@/components/VariationPicker"
import { ProductGallery } from "@/components/ProductGallery"
import { ProductReviews } from "@/components/ProductReviews"

export async function generateMetadata({ params }) {
  const { seo } = await dash.seo.product(params.slug)
  return { title: seo.title, description: seo.description }
}

export default async function ProductPage({ params }) {
  const { product } = await dash.products.getCore(params.slug)

  return (
    <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-8 py-12">
      <ProductGallery mainImage={product.main_image} images={product.images} />

      <div>
        <h1 className="text-3xl font-bold">{product.name}</h1>
        <p className="text-2xl mt-2">
          {product.discounted_price ? (
            <>
              <span className="line-through text-gray-500">${product.price}</span>
              <span className="text-green-400 ml-2">${product.discounted_price}</span>
            </>
          ) : (
            <span>${product.price}</span>
          )}
        </p>

        <VariationPicker slug={params.slug} />

        <div className="mt-6 prose"
             dangerouslySetInnerHTML={{ __html: product.description }} />
      </div>

      <div className="md:col-span-2">
        <ProductReviews slug={params.slug} />
      </div>
    </div>
  )
}