import React from 'react';
import Slider from 'react-slick';
import ServicesCard from './servicesCard';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export default function Services({ ServicesData }) {

    const settings = {
        dots: true,
        infinite: true,
        speed: 1000,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000, 
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                },
            },
            {
                breakpoint: 1000,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                },
            },
        ],
    };

    return (
        <div id="our_services">
        <section className="services">
            <div className="container">
                <div className="row">
                    <div className="col-12">
                        <div className="hh">
                            <span className="small-text">SERVICES</span>
                            <h2>{ServicesData?.services_heading}</h2>
                            <p>
                            {ServicesData?.services_description}
                            </p>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-lg-12 col-md-12 col-sm-12 col-12">
                        <Slider {...settings}>
                            {ServicesData?.website_services.map((item) => (
                                <ServicesCard data={item} key={item.id} />
                            ))}
                        </Slider>
                    </div>
                </div>
            </div>
        </section>
        </div>
    );
}