"use client";

import React from "react";
import { Swiper } from "swiper/react";
import { Pagination, Navigation, Autoplay, EffectFade } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import "swiper/css/autoplay";
import "swiper/css/effect-fade";

export default function CarouselComponent({
  spaceBetween,
  slidesPerView,
  children,
  containerClassName,
  breakpoints,
  pagination,
  navigation,
  autoPlay,
  autoHeight,
  swiperClassName,
  effect,
  autoplayDelay,
  centeredSlides,
  centerInsufficientSlides,
  centeredSlidesBounds,
  slidesOffsetBefore,
  slidesOffsetAfter,
}: {
  spaceBetween: number;
  slidesPerView: number;
  children: React.ReactNode;
  containerClassName: string;
  breakpoints?: any;
  pagination?: boolean;
  navigation?: boolean;
  autoPlay?: boolean;
  autoHeight?: boolean;
  swiperClassName?: string;
  effect?: string;
  autoplayDelay?: number;
  centeredSlides?: boolean;
  centerInsufficientSlides?: boolean;
  centeredSlidesBounds?: boolean;
  slidesOffsetBefore?: number;
  slidesOffsetAfter?: number;
}) {
  const modules = [];
  if (pagination) modules.push(Pagination);
  if (navigation) modules.push(Navigation);
  if (autoPlay) modules.push(Autoplay);
  if (effect === 'fade') modules.push(EffectFade);

  return (
    <div className={`${containerClassName}`}>
      <Swiper
        pagination={pagination ? { clickable: true } : false}
        navigation={navigation}
        modules={modules}
        className={`mySwiper w-full ${swiperClassName}`}
        spaceBetween={spaceBetween || 30}
        slidesPerView={slidesPerView || 1}
        breakpoints={breakpoints}
        autoplay={autoPlay ? { delay: autoplayDelay || 10000, disableOnInteraction: false } : false}
        autoHeight={!!autoHeight}
        effect={effect}
        fadeEffect={effect === 'fade' ? { crossFade: true } : undefined}
        centeredSlides={!!centeredSlides}
        centerInsufficientSlides={!!centerInsufficientSlides}
        centeredSlidesBounds={!!centeredSlidesBounds}
        slidesOffsetBefore={slidesOffsetBefore}
        slidesOffsetAfter={slidesOffsetAfter}
        style={{ width: '100%', height: autoHeight ? 'auto' : '100%' }}
      > 
        {children}
      </Swiper>
    </div>
  );
}