'use client'

import styles from './Carousel.module.css';
import {ComponentProps, ReactNode} from "react";
import Slider from "react-slick";
import Image from "next/image";
import sliderArrowLeft from "@/shared/assets/icons/sliderArrowLeft.svg";
import sliderArrowRight from "@/shared/assets/icons/sliderArrowRight.svg";

type Props = {
    children: ReactNode,
    settings?: ComponentProps<typeof Slider>
};

export function Carousel({children, settings}: Props) {
    const defaultSettings: ComponentProps<typeof Slider> = {
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        lazyLoad: 'progressive',
        prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
        nextArrow: <Image src={sliderArrowRight} alt={''}/>,
        dots: true,
        ...settings
    };

    return (
        <div className={styles.root}>
            <Slider {...defaultSettings}>
                {children}
            </Slider>
        </div>
    );
};