"use client";

import { FaQuoteLeft, FaStar } from "react-icons/fa";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import "swiper/css";
import useFetch from "@/app/hooks/useFetch";

const TestimonialSect = () => {
  const { data: testimonial, loading } = useFetch("testimonial/all-testimonial");

  return (
    <section className="py-20 bg-[#e7e8eb]">

      {/* Heading */}
      <div className="text-center mb-8">
        <p className="flex items-center gap-3 text-amber-600 font-semibold text-sm uppercase tracking-wide mx-auto w-fit">
          <span className="h-[1px] w-8 bg-amber-300"></span>
          Testimonials
          <span className="h-[1px] w-8 bg-amber-300"></span>
        </p>
        <p className="text-4xl font-semibold text-black">
          What Our Clients Say
        </p>
      </div>

      <div className="container mx-auto px-6">

        {!loading && (
          <Swiper
            spaceBetween={25}
            slidesPerView={1}
            loop={true}
            speed={900}
            autoplay={{ delay: 4000 }}
            modules={[Autoplay]}
            breakpoints={{
              640: { slidesPerView: 1 },
              768: { slidesPerView: 2 },
              1024: { slidesPerView: 3 },
            }}
          >
            {testimonial?.map((testi, index) => (
              <SwiperSlide key={index}>
                <div className="relative mt-8 overflow-visible bg-white rounded-2xl p-8 pt-12 shadow-md hover:shadow-2xl transition duration-300 border border-gray-100 flex flex-col min-h-[400px]">

                  {/* FLOATING AVATAR */}
                  <div className="absolute -top-6 left-6">
                    <img
                      src={testi?.img || "/img/user.png"}
                      alt={testi.name}
                      className="w-18 h-18 rounded-full object-cover border-4 border-white shadow-md"
                    />
                  </div>

                  {/* QUOTE ICON BADGE */}
                  <div className="absolute top-4 right-4 bg-yellow-400 text-white p-2 rounded-full shadow">
                    <FaQuoteLeft size={14} />
                  </div>

                  {/* MESSAGE */}
                  <p className="text-gray-600 text-sm leading-7 mb-6 mt-4 italic">
                    “{testi.message}”
                  </p>

                  {/* STARS */}
                  <div className="flex gap-1 text-yellow-400 mb-6">
                    {[...Array(5)].map((_, i) => (
                      <FaStar key={i} size={14} />
                    ))}
                  </div>

                  {/* USER INFO */}
                  <div className="mt-auto border-t pt-4 related z-[1]">
                    <p className="font-semibold text-gray-900">
                      {testi.name}
                    </p>
                    <span className="text-sm text-gray-500">
                      {testi.designation}
                    </span>
                  </div>

                  <FaQuoteLeft className="absolute text-gray-100 text-[80px] bottom-1 right-6 z-0" />
                </div>

              </SwiperSlide>
            ))}
          </Swiper>
        )}

      </div>
    </section>
  );
};

export default TestimonialSect;