"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";

import ReviewCard from "./ReviewCard";
import SectionHeading from "./SectionHeading";

const Reviews = ({ reviews }: any) => {
  return (
    <section className="reviewcontainer">
      <div className="container container-xxl px-3">

        {/* Heading */}
        <SectionHeading center>
          What Our Customers Say
        </SectionHeading>

        {/* Swiper */}
        <div className="flex flex-wrap -mx-3">
          <div className="w-full relative px-3">
            <Swiper
              modules={[Navigation, Autoplay]}
              loop={reviews?.length > 3}
              speed={700}
              autoplay={{
                    delay: 3000,
                    disableOnInteraction: false,
                  }}
              spaceBetween={20}
              slidesPerView={1}
              navigation={{
                nextEl: ".swiper-button-next-review-carousel",
                prevEl: ".swiper-button-prev-review-carousel",
              }}
              breakpoints={{
                100: {
                  slidesPerView: 1,
                  spaceBetween: 5,
                },
                260: {
                  slidesPerView: 1,
                  spaceBetween: 5,
                },
                370: {
                  slidesPerView: 1,
                  spaceBetween: 10,
                },
                574: {
                  slidesPerView: 2,
                  spaceBetween: 12,
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 15,
                },
                992: {
                  slidesPerView: 3,
                  spaceBetween: 15,
                },
                1200: {
                  slidesPerView: 3,
                  spaceBetween: 20,
                },
                1400: {
                  slidesPerView: 3,
                  spaceBetween: 20,
                },
                1700: {
                  slidesPerView: 3,
                  spaceBetween: 20,
                },
              }}
            >
              {reviews?.map((r: any, i: number) => (
                <SwiperSlide key={r.id || i}>
                  <ReviewCard {...r} />
                </SwiperSlide>
              ))}
            </Swiper>

            {reviews?.length > 3 && <div className="swiper-nav !mt-0">
                <div className="swiper-button-prev swiper-button-prev-review-carousel" />
                <div className="swiper-button-next swiper-button-next-review-carousel" />
            </div>}

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

export default Reviews;