"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { 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 py-12 bg-[#faf9f7]">
      <div className="container container-xxl px-3">

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

        {/* Swiper */}
        <div className="relative mt-6">

          <Swiper
            modules={[Navigation]}
            spaceBetween={20}
            slidesPerView={3}
            navigation={{
              nextEl: ".swiper-button-next-review-carousel",
              prevEl: ".swiper-button-prev-review-carousel",
            }}
            breakpoints={{
              0: { slidesPerView: 1 },
              768: { slidesPerView: 2 },
              1024: { slidesPerView: 3 },
            }}
          >
            {reviews?.map((r: any, i: number) => (
              <SwiperSlide key={r.id || i}>
                <ReviewCard {...r} />
              </SwiperSlide>
            ))}
          </Swiper>

          <div className="swiper-nav">
              <div className="swiper-button-prev swiper-button-prev-shop-carousel" />
              <div className="swiper-button-next swiper-button-next-shop-carousel" />
          </div>

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

export default Reviews;