import React from "react"
import Slider from "react-slick"
import "./SlickCarousel.scss"

interface SlickCarouselProps {
    children: React.ReactNode
    slidesToShow?: number
    slidesToScroll?: number
    autoplay?: boolean
    autoplaySpeed?: number
    dots?: boolean
    arrows?: boolean
    infinite?: boolean
    className?: string
    responsive?: Array<{
        breakpoint: number
        settings: {
            slidesToShow: number
            slidesToScroll: number
        }
    }>
}

const SlickCarousel = ({
    children,
    slidesToShow = 3,
    slidesToScroll = 1,
    autoplay = true,
    autoplaySpeed = 3000,
    dots = true,
    arrows = true,
    infinite = true,
    className,
    responsive = [
        {
            breakpoint: 992,
            settings: {
                slidesToShow: Math.min(slidesToShow, 2),
                slidesToScroll: 1,
            },
        },
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
            },
        },
    ],
}: SlickCarouselProps) => {
    const settings = {
        dots,
        infinite,
        speed: 500,
        slidesToShow,
        slidesToScroll,
        autoplay,
        autoplaySpeed,
        arrows,
        responsive,
    }

    return (
        <div className={`slick-carousel-wrapper ${className || ""}`}>
            <Slider {...settings}>
                {React.Children.map(children, (child, index) => (
                    <div key={index} className="slick-slide-item">
                        {child}
                    </div>
                ))}
            </Slider>
        </div>
    )
}

export default SlickCarousel
export { SlickCarousel }
export type { SlickCarouselProps }