import React, { useEffect } from "react";
import "./Testimonials.css";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/css";
import { Rating } from "react-simple-star-rating";

const Reviews = ({ ourcustomersays }) => {
  const testimonials = [
    {
      name: "Neha Joshi",
      image: "/assets/images/home/testimonials/img-2.png",
      review:
        "MyEase pads are incredibly soft and comfortable. They provide excellent protection throughout the day without causing irritation.",
      rating: 5,
    },
    {
      name: "Nisha Patil",
      image: "/assets/images/home/testimonials/img-2.png",
      review:
        "I love how lightweight and breathable the pads feel. Even during long work hours, I stay fresh and confident.",
      rating: 4.5,
    },
    {
      name: "Sneha Kulkarni",
      image: "/assets/images/home/testimonials/img-3.png",
      review:
        "The absorption quality is impressive and the fit is perfect. MyEase has become my go-to choice every month.",
      rating: 5,
    },
    {
      name: "Nisha Joshi",
      image: "/assets/images/home/testimonials/img-2.png",
      review:
        "Purchased MyEase for my family and the feedback was excellent. Reliable protection and great comfort at an affordable price.",
      rating: 4,
    },
    {
      name: "Pooja Shah",
      image: "/assets/images/home/testimonials/img-2.png",
      review:
        "Finally found a sanitary pad that combines softness, leak protection, and comfort. Highly recommended for everyday use.",
      rating: 5,
    },
  ];

  return (
    <section className="Testimonials">
      <div className="container">
        <div className="What_Customer_Say_div">
          <div className="row align-items-center">
            <div className="col-lg-3 col-md-4">
              <div className="col_left_div">
                <div className="qoute_div">
                  <img
                    src="/assets/images/home/testimonials/quote.png"
                    className="quote_img"
                  />
                </div>

                <div className="left_title_div">
                  <h5 className="left_title">
                    What <br /> Our Customers Say
                  </h5>
                  <p className="left_text">
                    Trusted by families and businesses who love our quality
                    products and reliable service.
                  </p>
                </div>
              </div>
            </div>

            <div className="col-lg-9 col-md-8">
              <div className="testimonial_section">
                <Swiper
                  modules={[Autoplay]}
                  spaceBetween={30}
                  slidesPerView={3}
                  loop={true}
                  breakpoints={{
                    0: { slidesPerView: 1.1 },
                    320: { slidesPerView: 1.1 },
                    440: { slidesPerView: 2.1 },
                    576: { slidesPerView: 2.1 },
                    768: { slidesPerView: 2.1 },
                    992: { slidesPerView: 2.1 },
                    1200: { slidesPerView: 3.1 },
                    1400: { slidesPerView: 3.1 },
                    1700: { slidesPerView: 3.1 },
                  }}
                  autoplay={{
                    delay: 2500,
                    disableOnInteraction: false,
                  }}
                >
                  {testimonials && testimonials.length > 0 ? (
                    testimonials?.map((item, index) => (
                      <SwiperSlide key={index}>
                        <div className="testimonial_card">
                          <div className="user_header_div">
                            <div className="user_img_div">
                              <img
                                src={item.image}
                                alt={item?.name}
                                className="user_img"
                              />
                            </div>

                            <div className="name_holder">
                              <h5 className="user_name">{item?.name}</h5>

                              <div className="stars">
                                <Rating
                                  initialValue={item?.rating || 0}
                                  size={18}
                                  allowFraction={true}
                                  readonly={true}
                                  fillColor="#643180"
                                  emptyColor="#ddd"
                                />
                              </div>
                            </div>
                          </div>

                          <p className="review_text">{item?.review}</p>
                        </div>
                      </SwiperSlide>
                    ))
                  ) : (
                    <SwiperSlide>
                      <div className="no-products-message">
                        <p>
                          <strong>No Data available</strong>
                        </p>
                      </div>
                    </SwiperSlide>
                  )}
                </Swiper>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Reviews;
