"use client";
import { useRef } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Swiper as SwiperClass } from "swiper/types";
import "swiper/css";
import "swiper/css/pagination";
import { Pagination, Autoplay } from "swiper/modules";
import { AWS_CDN_URL } from "@/utils/staticValues";

export default function ImageSwiperDH(props: any) {
  const { dhGallery } = props;
  const swiperRef = useRef<SwiperClass | null>(null);

  if (!Array.isArray(dhGallery) || dhGallery.length === 0) {
    return null; // or fallback UI
  }
  const sliderSettings = {
    320: {
      slidesPerView: 2,
    },
    680: {
      slidesPerView: 3,
    },
    1024: {
      slidesPerView: 4,
    },
  };
  const maxSlidesPerView = 6;
  const shouldLoop = dhGallery.length > maxSlidesPerView;

  return (
    <>
      {props.children}
      <div className="relative -mt-8.5 flex w-full flex-col pt-6">
        <div className="absolute top-0.5 z-20 flex h-5 w-full flex-row justify-center gap-10 overflow-hidden align-middle md:gap-50">
          {[6, 15, 12, 3, 18, 6, 15].map((w, i) => (
            <div key={i}>
              <span className={`hairline-12 inline-flex h-3 w-${w}`}></span>
            </div>
          ))}
        </div>
        <div
          className="sec-swiper relative z-10 -mt-2.5 flex overflow-hidden border-t-2 border-gray-950/50 pt-20 pb-10 md:-mt-3"
          onMouseEnter={() => swiperRef.current?.autoplay?.stop()}
          onMouseLeave={() => swiperRef.current?.autoplay?.start()}
        >
          <Swiper
            onSwiper={(swiper) => (swiperRef.current = swiper)}
            slidesPerView={maxSlidesPerView}
            loop={true}
            breakpoints={sliderSettings}
            centeredSlides={true}
            speed={10000}
            autoplay={{
              delay: 0,
              disableOnInteraction: false,
            }}
            spaceBetween={10}
            pagination={{ clickable: true }}
            modules={[Autoplay, Pagination]}
            className="swiper dh-profile-gallery showcase-bullet"
            style={{ paddingBottom: 60 }}
          >
            {dhGallery &&
              dhGallery.map((item: any) => (
                <SwiperSlide key={item.id}>
                  <Image
                    src={`${AWS_CDN_URL}/${item?.image}`}
                    height={600}
                    width={1000}
                    className="img-responsive"
                    alt={item.id}
                  />
                </SwiperSlide>
              ))}
          </Swiper>
        </div>
      </div>
    </>
  );
}