"use client";

import Image from "next/image";
import { useRef, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import type { Swiper as SwiperType } from "swiper";
import { Autoplay } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import { testimonialSection2Data } from "@/data/about/testimonialSection2";

export default function TestimonialSection2() {
  const { subTitle, title, testimonials } = testimonialSection2Data;
  const half = Math.ceil(testimonials.length / 2);
  const [activeBullet, setActiveBullet] = useState(0);
  const swiperRef = useRef<SwiperType | null>(null);

  const handleSlideChange = (swiper: SwiperType) => {
    const realIndex = swiper.realIndex;
    setActiveBullet(realIndex < half ? 0 : 1);
  };

  return (
    <section className="testimonial-sec2 space">
      <div className="carousel-container">
        <div className="sec-title">
          <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>
        <Swiper
          modules={[Autoplay]}
          slidesPerView={3}
          spaceBetween={30}
          speed={400}
          loop={true}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          onSwiper={(swiper) => {
            swiperRef.current = swiper;
          }}
          onSlideChange={handleSlideChange}
          breakpoints={{
            320: { slidesPerView: 1, spaceBetween: 15 },
            768: { slidesPerView: 2, spaceBetween: 20 },
            1024: { slidesPerView: 3, spaceBetween: 30 },
          }}
          className="testi3"
        >
          {testimonials.map((item, index) => (
            <SwiperSlide key={index}>
              <div className="testi-card">
                <div className="testi-auther">
                  <Image
                    src={item.image}
                    alt={`${item.name} profile photo`}
                    width={60}
                    height={60}
                  />
                  <h3 className="name">{item.name}</h3>
                  <span className="designation">{item.designation}</span>
                </div>
                <p>{item.quote}</p>
                <Image
                  src={item.ratingIcon}
                  alt="5 star rating"
                  width={100}
                  height={20}
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
        <div className="testi-pagination" style={{ textAlign: "center" }}>
          {[0, 1].map((i) => (
            <span
              key={i}
              className={`swiper-pagination-bullet${activeBullet === i ? " swiper-pagination-bullet-active" : ""}`}
              style={{ cursor: "pointer" }}
              onClick={() => swiperRef.current?.slideToLoop(i * half, 1200)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}