import React, { ReactNode } from 'react';
import Slider from 'react-slick';



const menuslides = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,

    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 4,
            },
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
            },
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
            },
        },
    ],
};


interface CustomCarouselProps {
    children: any;
    // menuslides: any; // Adjust the type based on the structure of your settings object
}

const CustomCarousel: React.FC<CustomCarouselProps> = ({ children }) => {
    return (
        <div className="mt-4" style={{ overflowX: 'hidden' }}>
            <div className="carousel-container">
                <Slider {...menuslides}>
                    asdfasdf
                </Slider>
            </div>
        </div>
    );
};

export default CustomCarousel;