Product Carousel

<ProductCarousel
  id="product-carousel"
  className="bg-card border w-xs shadow rounded-3xl p-4 overflow-hidden space-y-4"
>
  <ProductCarouselWrapper>
    <div className="bg-card/80 border px-3 rounded-full shadow-xs shadow-black/15 absolute top-1 left-1 z-20">
      <NikeIcon className="size-6" />
    </div>

    <ProductCarouselSlide className="flex justify-center items-end  " index={0}>
      <ProductImage className="justify-center items-center">
        <Image
          src="https://m.media-amazon.com/images/I/51idMcfqaeL._AC_SX695_.jpg"
          width={695}
          height={390}
          className="inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain"
          alt="nike air jordan"
        />
        <Image
          src="https://m.media-amazon.com/images/I/51o7G1R81ML._AC_SX695_.jpg"
          width={695}
          height={385}
          className="inline-block align-middle w-4/5 mx-auto h-auto max-h-full object-contain"
          alt="nike air jordan"
        />
      </ProductImage>
    </ProductCarouselSlide>
  </ProductCarouselWrapper>
  <div className="py-1 px-3 inline-flex items-center space-x-2">
    <ProductCarouselThumbnail
      index={0}
      className=" bg-blue-600 rounded"
      layoutId="product-carousel"
    />
    <ProductCarouselThumbnail
      index={1}
      className="bg-red-600 rounded"
      layoutId="product-carousel"
    />

    <ProductCarouselThumbnail
      index={2}
      className="bg-yellow-600 rounded"
      layoutId="product-carousel"
    />
  </div>
</ProductCarousel>