import React from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import Testimonials from "./Testimonials";
import style from "./TestimonialCarousal.module.css";

const responsive = {
  superLargeDesktop: {
    breakpoint: { max: 4000, min: 0 },
    items: 1,
  },
  //   desktop: {
  //     breakpoint: { max: 3000, min: 1024 },
  //     items: 1,
  //   },
  //   tablet: {
  //     breakpoint: { max: 1024, min: 464 },
  //     items: 1,
  //   },
  //   mobile: {
  //     breakpoint: { max: 464, min: 0 },
  //     items: 1,
  //   },
};

const CustomButtonGroupAsArrows = ({ next, previous, ...rest }) => {
  return (
    <div>
      <button onClick={previous} className={style.button}>
        <i
          class="fa fa-chevron-left"
          style={{ fontSize: "14px", color: "#2C5C94" }}
        />
      </button>
      <button onClick={next} className={style.button}>
        <i
          class="fa fa-chevron-right"
          style={{ fontSize: "14px", color: "#2C5C94" }}
        />
      </button>
    </div>
  );
};

const TestimonialCarousal = ({ data }) => {
  return (
    <>
      <Carousel
        arrows={false}
        responsive={responsive}
        renderButtonGroupOutside
        customButtonGroup={<CustomButtonGroupAsArrows />}
      >
        {data.map((item) => (
          <Testimonials item={item} />
        ))}
      </Carousel>
    </>
  );
};

export default TestimonialCarousal;
