"use client";

import React, { useEffect, useState } from "react";
import { assetPath } from "../../utils/assetPath";

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

import "swiper/css";
import "swiper/css/navigation";
import { getTestimonials } from "@/services/cmsService";
import { API_BASE_IMAGE_URL } from "config";

const Testimonial = () => {
  const [testimonials, setTestimonials] = useState([]);

  const fetchTestimonials = async () => {
    try{
      const response = await getTestimonials();
      setTestimonials(response.data);
    }catch(error){
    }
  }

  useEffect(() => {
    fetchTestimonials();
  }, []);

  return (
    <section className="testimonialcontainer">
      <div className="testimonialinner">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-xxl-8 col-xl-8 col-lg-11 col-md-12 col-sm-12 col-12">
              <div
                className="section-heading text-center"
                data-aos="zoom-in"
                data-aos-delay={1000}
                data-aos-duration={500}
              >
                <div className="subheading">Testimonials</div>
                <h2>What Our Clients Say</h2>
              </div>
            </div>
          </div>

          <div className="row">
            <div
              className="col-12"
              data-aos="zoom-in-up"
              data-aos-delay={1000}
              data-aos-duration={500}
            >
              <Swiper
                modules={[Navigation, Autoplay]}
                autoplay={{
                  delay: 4000,
                  disableOnInteraction: false,
                  pauseOnMouseEnter: true,
                }}
                navigation={{
                  nextEl: ".testimonial-swiper-next",
                  prevEl: ".testimonial-swiper-prev",
                }}
                loop={true}
                centeredSlides={true}
                slidesPerView={3}
                spaceBetween={40}
                breakpoints={{
                  0: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    centeredSlides: false,
                  },
                  400: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    centeredSlides: false,
                  },
                  480: {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    centeredSlides: false,
                  },
                  768: {
                    slidesPerView: 2,
                    spaceBetween: 10,
                    centeredSlides: false,
                  },
                  992: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                    centeredSlides: true,
                  },
                  1200: {
                    slidesPerView: 3,
                    spaceBetween: 40,
                    centeredSlides: true,
                  },
                  1600: {
                    slidesPerView: 3,
                    spaceBetween: 50,
                    centeredSlides: true,
                  },
                }}
                className="testimonial-swiper"
              >
                {testimonials?.map((item) => (
                  <SwiperSlide key={item.id}>
                    <div className="item">
                      <div className="testimonialbx">
                        <div className="flex-fill">
                          <div className="rating">
                            {[...Array(item.rating || 5)].map((_, index) => (
                              <i
                                key={index}
                                className="icon icon-star"
                              ></i>
                            ))}
                          </div>

                          <p>{item.content}</p>
                        </div>

                        <div className="usertext">
                          <div className="userimg">
                            <img
                              src={
                                item.image
                                  ? `${API_BASE_IMAGE_URL}${item.image}`
                                  : assetPath("/assets/images/user-1.jpg")
                              }
                              alt={item.name}
                            />
                          </div>

                          <div className="userct">
                            <h4>{item.name}</h4>
                            <p>{item.profession}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </SwiperSlide>
                ))}

              </Swiper>

              <div className="testimonial-swiper-nav">
                <button className="testimonial-swiper-prev" type="button">
                  <i className="icon icon-arrow-long-left"></i>
                </button>

                <button className="testimonial-swiper-next" type="button">
                  <i className="icon icon-arrow-long-right"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Testimonial;