import * as React from "react";
import Autoplay from "embla-carousel-autoplay";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import Image from "next/image";

const ProductCarousel = () => {
  const plugin = React.useRef(
    Autoplay({ delay: 3000, stopOnInteraction: true })
  );
  return (
    <Carousel
      plugins={[plugin.current]}
      className="w-full max-w-full "
      onMouseEnter={plugin.current.stop}
      onMouseLeave={plugin.current.reset}
    >
      <CarouselContent className="-ml-4">
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 hover:scale-125 relative">
          <Image
            src="/batch1/Mockup 126.png"
            width={300}
            height={300}
            alt="shirt 3"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
          <Image
            src="/batch1/Mockup 18.png"
            width={300}
            height={300}
            alt="shirt 6"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
          <Image
            src="/batch1/Mockup 73.png"
            width={300}
            height={300}
            alt="shirt 10"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
          <Image
            src="/batch1/Mockup 112.png"
            width={300}
            height={300}
            alt="shirt 3"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
          <Image
            src="/batch1/Mockup 4.png"
            width={300}
            height={300}
            alt="shirt 6"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
          <Image
            src="/batch1/Mockup 97.png"
            width={300}
            height={300}
            alt="shirt 10"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
          <Image
            src="/batch1/Mockup 132.png"
            width={300}
            height={300}
            alt="shirt 10"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
        <CarouselItem className="md:basis-1/2 lg:basis-1/3 xl:basis-1/4 2xl:basis-1/5 pl-4 relative hover:scale-125">
          <Image
            src="/batch1/Mockup 133.png"
            width={300}
            height={300}
            alt="shirt 10"
            quality={100}
          />
          <div className="absolute top-0 left-0 bg-slate-700 w-[94px] h-1/4"></div>
        </CarouselItem>
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
};

export default ProductCarousel;
