"use client";
import { testimonials2 } from "@/data/testimonials";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import Image from "next/image";
import { Pagination } from "swiper/modules";
export default function Testimonials() {
  return (
    <div className="section-testimonial style-6">
      <div className="tf-container-2">
        <div className="heading-section gap_12 text-center mb_58">
          <div className="heading-tag d-flex gap_12 mx-auto mb_20 text_mono-dark-8 fw-5">
            <div className="icon">
              <i className="icon-star" />
            </div>
            <p className="text-body-3">Testimonials</p>
          </div>
          <h2 className="title text_mono-dark-9 fw-5 split-text effect-right">
            Voices of our <span className="text-gradient">partners</span> in
            growth
          </h2>
        </div>
        <div className="section-testimonial style-3">
          <div className="wrapper">
            <Swiper
              className="swiper sw-layout"
              spaceBetween={15}
              breakpoints={{
                768: {
                  spaceBetween: 20,
                },
                992: {
                  spaceBetween: 24,
                },
              }}
              modules={[Pagination]}
              pagination={{
                clickable: true,
                el: ".spd11",
              }}
            >
              {testimonials2.map((testimonial) => (
                <SwiperSlide
                  className="swiper-slide"
                  key={`testimonial-${testimonial.id}`}
                >
                  <div className="testimonial style-2">
                    <div className="logo">
                      <Image
                        alt="logo"
                        src={testimonial.logo}
                        width={testimonial.logoWidth}
                        height={testimonial.logoHeight}
                      />
                    </div>
                    <h5 className="text text_white fw-6">
                      {testimonial.quote}
                    </h5>
                    <div className="author">
                      <h6 className="name fw-5 text_white mb_2">
                        {testimonial.name}
                      </h6>
                      <p className="text-body-2 text_mono-gray-5">
                        {testimonial.position}
                      </p>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
              <div className="sw-dots style-default sw-pagination-layout style-1 mt_24 justify-content-center d-flex spd11" />
            </Swiper>
          </div>
        </div>
      </div>
    </div>
  );
}