Product Images

import dash from "@/lib/dash"

const { product } = await dash.products.get("blue-dream")

// Main image
console.log(product.main_image) // "https://cdn.dashfordevs.com/..."

// Gallery images
product.images.forEach(img => {
  console.log(img.image, img.alt_text, img.order)
})

// Variation-specific images
product.attributes[0].options.forEach(opt => {
  console.log(opt.value, opt.image) // Each variation can have its own image
})

"use client"
import { useState } from "react"

export function ProductGallery({ mainImage, images }) {
  const [selected, setSelected] = useState(mainImage)

  const allImages = [mainImage, ...images.map(i => i.image)].filter(Boolean)

  return (
    <div>
      <img src={selected} alt="Product" className="w-full rounded" />
      <div className="flex gap-2 mt-2">
        {allImages.map((img, i) => (
          <img key={i} src={img} alt={`View ${i + 1}`}
               className={`w-16 h-16 rounded cursor-pointer ${selected === img ? "ring-2 ring-blue-500" : ""}`}
               onClick={() => setSelected(img)} />
        ))}
      </div>
    </div>
  )
}