"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import Link from "next/link";
import { reviews } from "../../datas/reviews";

const swiperOptions = {
  modules: [Autoplay, Pagination, Navigation],
  slidesPerView: 1,
  spaceBetween: 30,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  loop: true,

  // Navigation
  navigation: {
    nextEl: ".testimonial-two-button-next",
    prevEl: ".testimonial-two-button-prev",
  },

  // Pagination
  pagination: {
    el: ".swiper-pagination-testimonials",
    clickable: true,
  },
};
export default function Testimonials() {
  return (
    <>
      <section className="testimonials_area-seven">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-xl-6 col-lg-8">
              <div className="section-title text-center mb-40 tg-heading-subheading animation-style3">
                <h2 className="title tg-element-title">
                  Check out what our clients are saying...
                </h2>
              </div>
            </div>
          </div>
          <div className="slider_testimonial_home7">
            <span className="quote-review">
              <img src="/assets/img/home7/quote.svg" />
            </span>
            <div className="swiper-container slider_baner__active">
              <Swiper {...swiperOptions} className="swiper-wrapper">
                {reviews.map((q) => (
                  <SwiperSlide className="swiper-slide slide__home7">
                    <div className="item-testimonial">
                      <div className="item-testimonial-left">
                        <div className="author-testimonial">
                          <img src={q.img} />
                          <div className="info-author-review">
                            <strong className="name-review">{q.name}</strong>
                            <div className="testimonial__rating">
                              <i className="fas fa-star" />
                              <i className="fas fa-star" />
                              <i className="fas fa-star" />
                              <i className="fas fa-star" />
                              <i className="fas fa-star" />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div className="item-testimonial-right">
                        <p>
                          <Link
                            href="https://maps.app.goo.gl/7Y48i2Yj5XEWPCAg6"
                            target="_blank"
                          >
                            {q.review}
                          </Link>
                        </p>
                      </div>
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>
            </div>
            <div className="testimonial__nav-four">
              <div className="testimonial-two-button-prev button-swiper-prev">
                <i className="flaticon-right-arrow" />
              </div>
              <div className="testimonial-two-button-next button-swiper-next">
                <i className="flaticon-right-arrow" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}