"use client";
import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel";
import Anhooma from "@/public/images/آنهوما.svg"
import AutoScroll from "embla-carousel-auto-scroll";
import Image from "next/image";
const menuItems = [
  {
    // title: "سازمان صنایع کوچک و شهرک های صنعتی ایران",
    icon: Anhooma,
  },
  {
    // title: "سازمان نظام صنفی رایانه ای کشور",
    icon: Anhooma,
  },
  {
    // title: "برنامه توسعه زیست بوم شرکت های خلاق",
    icon: Anhooma,
  },
  {
    // title: "سازمان تدارکات الکترونیکی دولت",
    icon: Anhooma,
  },
  {
    // title: "سازمان تدارکات الکترونیکی دولت",
    icon: Anhooma,
  },
];
export default function AutoPlayCarousel() {
  const duplicatedItems = [...menuItems, ...menuItems, ...menuItems];
  return (
    <div className="relative w-full overflow-hidden" dir="rtl">
      {/* Fade Left */}
      <div className="absolute left-0 top-0 bottom-0 w-20 z-20 bg-linear-to-r from-primary to-transparent  pointer-events-none" />
      {/* Fade Right */}
      <div className="absolute right-0 top-0 bottom-0 w-20 z-20 bg-linear-to-l from-primary to-transparent  pointer-events-none" />
      <Carousel
        opts={{
          loop: true,
          align: "center",
          direction: "rtl",
          dragFree:true
        }}
        plugins={[
          AutoScroll({
            speed: 1, // کنترل سرعت واقعی
            stopOnInteraction: false,
            stopOnMouseEnter: true, // توقف روی hover
            direction: "backward",
          }),
        ]}
        orientation={"horizontal"}
        className="bg-primary py-4"
      >
        <CarouselContent className="mx-0">
          {duplicatedItems.map((item, index) => (
            <CarouselItem
              key={index}
              className="lg:pl-4 basis-[40%] sm:basis-1/2 lg:basis-1/3 lg:basis-1/4"
            >
              <div className="flex items-center gap-2">
                <Image
                  src={item.icon}
                  width={100}
                  height={100}
                  alt={"works"}
                  className="shrink-0 lg:w-40"
                />
                {/* <span className="text-sm lg:text-base font-medium leading-tight">
                  {item.title}
                </span> */}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </div>
  );
}

