"use client";
import React from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper/modules";
import { testimonialData } from "@/data/home/testimonialData";

const TestimonialSection: React.FC = () => {
  const { subTitle, title, testimonials } = testimonialData;

  return (
    <section className="testimonial-sec space" id="testimonial">
      <div className="carousel-container">
        <div className="sec-title white text-center">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={300}
          >
            {subTitle}
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={400}
          >
            {title}
          </h2>
        </div>
        <div className="testi-info">
          <Swiper
            modules={[Pagination, Autoplay]}
            pagination={{ 
              clickable: true,
              el: ".testi-pagination"
            }}
            autoplay={{ delay: 6000 }}
            loop={true}
            className="testi-swiper"
            data-aos="fade-up"
            data-aos-duration={900}
          >
            {testimonials.map((testi, index) => (
              <SwiperSlide key={index}>
                <div className="testi-card">
                  <div className="testi-img">
                    <Image
                      src={testi.img}
                      alt={`${testi.name} Image`}
                      width={410}
                      height={410}
                    />
                  </div>
                  <div className="testi-content">
                    <Image
                      src="/assets/images/icon/comas1-1.svg"
                      alt="Quotation Icon"
                      width={72}
                      height={55}
                    />
                    <p>&quot;{testi.text}&quot;</p>
                    <span className="name">{testi.name}</span>
                    <span className="designation">{testi.designation}</span>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
          {/* Pagination */}
          <div className="swiper-pagination testi-pagination" />
        </div>
      </div>
    </section>
  );
};

export default TestimonialSection;