import React, { ReactNode, ReactElement, Children } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Navigation, Pagination } from "swiper/modules";

interface SwiperWrapperProps {
  children: ReactNode;
  slidesPerView: number;
  spaceBetween?: number;
  onSlideClick?: (id: string) => void;
}

const SwiperWrapper = ({
  children,
  slidesPerView,
  spaceBetween = 30,
  onSlideClick,
}: SwiperWrapperProps) => (
  <Swiper
    slidesPerView={slidesPerView}
    spaceBetween={spaceBetween}
    navigation={true}
    pagination={{ clickable: true }}
    modules={[Navigation, Pagination]}
    className="mySwiper"
  >
    {Children.map(children, (child) => {
      if (React.isValidElement(child) && onSlideClick) {
        return React.cloneElement(child as ReactElement, {
          onClick: () => onSlideClick(child.key as string), 
        });
      }
      return child;
    })}
  </Swiper>
);

export default SwiperWrapper;