You craft, agents build.

import useEmblaCarousel from 'embla-carousel-react';

export default function Products({ fields }) {
  const [emblaRef] = useEmblaCarousel({ align: 'start', dragFree: true });
  return (
    <section>
      <h2>{fields.heading}</h2>
      <div className="product-viewport" ref={emblaRef}>
        <div className="product-track">
          {fields.products.map(product => (
            <ProductCard key={product.id} {...product.fields} />
          ))}
        </div>
      </div>
    </section>
  );
}