"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/css";
import { useState } from "react";
import ImageLightbox from "./ImageLightbox";

interface ReverseAutoSliderProps {
  images?: string[];
}

const defaultSlides = [
  "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(4).png",
  "https://yefranchisees.b-cdn.net/frontend/Program-detail/ab_scroll_pct_7.png",
  "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(5).png",
  "https://yefranchisees.b-cdn.net/frontend/Program-detail/ab_scroll_pct_9.png",
  "https://yefranchisees.b-cdn.net/frontend/Program-detail/photo%20(6).png",
];

export default function ReverseAutoSlider({
  images = defaultSlides,
}: ReverseAutoSliderProps) {
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  return (
    <div className="w-full overflow-hidden py-6 bg-white marquee-swiper">
      <Swiper
        modules={[Autoplay]}
        spaceBetween={15}
        slidesPerView={3}
        loop
        speed={5000}
        allowTouchMove={false}
        autoplay={{
          delay: 1,
          reverseDirection: true,
          disableOnInteraction: false,
          pauseOnMouseEnter: false,
        }}
        breakpoints={{
          0: { slidesPerView: 1 },
          640: { slidesPerView: 2 },
          1024: { slidesPerView: 3 },
        }}
        className="flex items-center"
      >
        {images.map((src, i) => (
          <SwiperSlide key={`${src}-${i}`}>
            <div className="bg-gray-100 rounded-[32px] shadow-md flex justify-center">
              <img
                src={src}
                className="w-full h-[290px] xl:h-[360px] md:h-[250px] object-cover rounded-[32px] cursor-pointer"
                alt="Slider Image"
                loading="lazy"
                onClick={() => setLightboxIndex(i)}
              />
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      <ImageLightbox
        images={images}
        index={lightboxIndex}
        onClose={() => setLightboxIndex(null)}
      />
    </div>
  );
}