import React, { useRef, useState, useEffect } from 'react';
import Autoplay from "embla-carousel-autoplay";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  type CarouselApi
} from "@repo/ui/components/carousel";

interface CarouselComponentProps {
  carouselData: { id: number; image: string; title: string }[];
}

const CarouselComponent: React.FC<CarouselComponentProps> = ({ carouselData }) => {
  const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));

  // 监听轮播图变化
  useEffect(() => {
    if (!carouselAPI) return;

    const updateCurrentIndex = () => {
      setCurrentIndex(carouselAPI.selectedScrollSnap());
    };

    carouselAPI.on("select", updateCurrentIndex);

    return () => {
      carouselAPI.off("select", updateCurrentIndex);
    };
  }, [carouselAPI]);

  // 滚动到指定索引
  const scrollToIndex = (index: number) => {
    if (carouselAPI) {
      carouselAPI.scrollTo(index);
      setCurrentIndex(index);
    }
  };

  return (
    <div className="relative"> {/* 添加相对定位 */}
      <Carousel
        className="h-[255px] w-[400px]"
        setApi={setCarouselAPI}
        plugins={[plugin.current, Autoplay({ delay: 2000, stopOnInteraction: true })]}
        onMouseEnter={plugin.current.stop}
        onMouseLeave={plugin.current.reset}
      >
        <CarouselContent>
          {carouselData.map((item) => (
            <CarouselItem key={item.id}>
              <div className="h-[255px] w-[400px] relative">
                <img src={item.image} alt={item.title} className="w-full h-full object-cover rounded-lg" />
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>

      {/* 圆点指示器 */}
      <div className="absolute bottom-2 right-2 flex justify-center mb-[20px]"> {/* 添加绝对定位 */}
        {carouselData.map((_, index) => (
          <button
            key={index}
            className={`w-3 h-3 rounded-full mx-1 ${currentIndex === index ? 'bg-red-500' : 'bg-white'}`}
            onClick={() => scrollToIndex(index)}
          />
        ))}
      </div>
    </div>
  );
};

export default CarouselComponent;