"use client"
import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel"
import { Product } from "@/modules/products/product"
import Autoplay from "embla-carousel-autoplay"
import Image from "next/image"
import { useEffect, useState } from "react"

const SingleProductSlider = ({ lang, product }: { lang: Lang; product: Product }) => {
  const [currentImg, setCurrentImg] = useState("")

  useEffect(() => {
    setCurrentImg(product?.images?.[0]?.original_url)
  }, [product])

  return (
    <Carousel
      opts={{
        direction: lang === "ar" ? "rtl" : "ltr",
      }}
      plugins={[
        // @ts-ignore
        Autoplay({
          delay: 2000,
        }),
      ]}
    >
      {/* current img */}
      {/* <div className="bg-green-200">{imgs[currentImg]}</div> */}
      <div className="bg-white h-[550px] rounded-xl overflow-hidden">
        <Image
          className="w-full h-full object-cover"
          src={currentImg}
          alt="product preview"
          width={1000}
          height={1000}
        />
      </div>
      {product?.images?.length > 1 && (
        <CarouselContent>
          {product?.images?.map((img) => (
            <CarouselItem
              key={img?.id}
              onClick={() => {
                setCurrentImg(img?.original_url)
              }}
              className="basis-auto sm:basis-1/2 lg:basis-1/3 xl:basis-1/4 bg-white"
            >
              {/* {items (images)} */}
              <div className="w-full h-[150px] mt-5 rounded-2xl overflow-hidden bg-white">
                <Image
                  className="w-full h-full object-cover"
                  src={img?.original_url}
                  alt="img"
                  width={500}
                  height={500}
                />
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      )}
    </Carousel>
  )
}

export default SingleProductSlider