'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
};

const settings: ComponentProps<typeof Slider> = {
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    lazyLoad: 'progressive',
    prevArrow: <Image src={sliderArrowLeft} alt={''}/>,
    nextArrow: <Image src={sliderArrowRight} alt={''}/>,
};

export function Carousel({children}: Props) {
    return (
        <div className={styles.root}>
            <Slider {...settings}>
                {children}
            </Slider>
        </div>
    );
};