"use client";

import Image from "next/image";
import { testimonialsData } from "@/data/home/testimonialsData";
import { useEffect, useRef } from "react";
import Swiper from "swiper";
import { Pagination } from "swiper/modules";

export default function TestimonialsSection() {
  const { subTitle, title, description, testimonials } = testimonialsData;
  const swiperRef = useRef<HTMLDivElement>(null);
  const swiperInstance = useRef<Swiper | null>(null);

  useEffect(() => {
    if (swiperRef.current && !swiperInstance.current) {
      swiperInstance.current = new Swiper(swiperRef.current, {
        modules: [Pagination],
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".testi-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            // Only show 2 bullets regardless of total slides
            if (index < 2) {
              return '<span class="' + className + '"></span>';
            }
            return "";
          },
        },
        breakpoints: {
          768: {
            slidesPerView: 2,
            spaceBetween: 40,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 50,
          },
        },
      });
    }

    return () => {
      if (swiperInstance.current) {
        swiperInstance.current.destroy();
        swiperInstance.current = null;
      }
    };
  }, []);

  return (
    <section id="insights" className="testimonial-sec space">
      <div className="carousel-container">
        <div className="sec-title">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={200}
          >
            {subTitle}
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={200}
          >
            {title}
          </h2>
          <p data-aos="fade-up" data-aos-duration={900} data-aos-delay={300}>
            {description}
          </p>
        </div>
        <div className="swiper testi" ref={swiperRef}>
          <div className="swiper-wrapper">
            {testimonials.map((testimonial, index) => (
              <div className="swiper-slide" key={index}>
                <div
                  className="testi-card"
                  data-aos="fade-up"
                  data-aos-duration={900}
                  data-aos-delay={
                    index < 3 ? (index + 1) * 200 : (index - 2) * 200
                  }
                >
                  <div className="testi-auther">
                    <Image
                      src={testimonial.authorImage}
                      alt={testimonial.authorAlt}
                      width={76}
                      height={76}
                    />
                    <h3 className="name">{testimonial.name},</h3>
                    <span className="designation">
                      {testimonial.designation}
                    </span>
                  </div>
                  <p>{testimonial.content}</p>
                  <div className="separator-line" />
                  <Image
                    src={testimonial.logoLight}
                    alt={testimonial.logoAlt}
                    className="light"
                    width={153}
                    height={30}
                  />
                  <Image
                    src={testimonial.logoDark}
                    alt={testimonial.logoAlt}
                    className="dark"
                    width={153}
                    height={30}
                  />
                </div>
              </div>
            ))}
          </div>
          {/* Pagination */}
          <div className="swiper-pagination testi-pagination" />
        </div>
      </div>
    </section>
  );
}