import React, { useState } from 'react';
import TestimonialCard from './testimonialCard';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export default function Testimonial({TestimonialData}) {
   
    const settings = {
        dots: true,
        infinite: true,
        speed: 1500,
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: false,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                },
            },
            {
                breakpoint: 1000,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                },
            },
        ],
    };

    return (

        <section className="testimonial">
            <div className="container">
                <div className="row">
                    <div className="col-12">
                        <div className="hh">
                            <span className="small-text">What People Say</span>
                            <h2>PASSENGER FEEDBACK</h2>
                        </div>
                    </div>
                </div>
                <div className="container-fluid bg-body-tertiary py-3 ">
                    <div id="testimonialCarousel" className="carousel testimonialCarousel">
                        <Slider {...settings}>
                            {TestimonialData?.testimonials.map((item) => (
                                <TestimonialCard data={item} key={item.testimonial.id} />
                                
                            ))}
                        </Slider>

                    </div>
                </div>
            </div>
        </section>
    );
}