import Carousel from "react-multi-carousel"
import "react-multi-carousel/lib/styles.css"
import {CarouselProps} from "../../props"
import styles from "./styles.module.sass"

export const CustomCarousel = ({
  children,
  webItems = 1,
  mobItems = 1,
  showButton,
  showDots,
  itemClass,
  containerClass,
  dotClass = "carousel-dots",
  slideClass,
  autoPlay,
  isSwipe = true,
  slideItems = 1,
}: CarouselProps) => {
  const responsiveCarousel = {
    desktop: {
      breakpoint: {
        max: 5000,
        min: 769,
      },
      items: webItems,
    },
    mobile: {
      breakpoint: {
        max: 768,
        min: 0,
      },
      items: mobItems,
    },
  }

  return (
    <section className={styles.carousel_container}>
      <Carousel
        customTransition="all 0.4s linear"
        responsive={responsiveCarousel}
        arrows={showButton}
        showDots={showDots}
        itemClass={itemClass}
        sliderClass={slideClass}
        dotListClass={dotClass}
        containerClass={containerClass}
        swipeable={isSwipe}
        autoPlay={autoPlay}
        autoPlaySpeed={4000}
        infinite={true}
        rewind={true}
        rewindWithAnimation={true}
        pauseOnHover={false}
        slidesToSlide={slideItems}>
        {children}
      </Carousel>
    </section>
  )
}