import React, { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import Image from "next/image";
import { useQuery } from "@tanstack/react-query";
import { getAPIAuth } from "@/services/apiservice";
import { API_GET_TESTIMONIALS } from "@/utils/APIConstant";

const testimonials = [
  {
    id: 1,
    image: "/assets/img/testi-1.jpg",
    text: "The sessions were incredibly personalized to my needs. Within just 3 months, I saw significant improvements, and the medicines prescribed worked like magic. I’m truly grateful",
    author: "Neha Sharma",
  },
  {
    id: 2,
    image: "/assets/img/testi-1.jpg",
    text: "I was amazed by how affordable the consultation packages were. The tailored approach helped me see results quickly, both mentally and physically.",
    author: "Rohan Aggarwal",
  },
  {
    id: 3,
    image: "/assets/img/testi-1.jpg",
    text: "I felt a noticeable difference within weeks! The personalized attention from Presivio consultants and their effective treatment plan made a huge impact on my well-being.",
    author: "Nitin Kumar",
  },
  {
    id: 4,
    image: "/assets/img/testi-1.jpg",
    text: "The holistic and affordable care provided by Presivio has been life-changing. The medicines worked so well that I felt a new sense of energy in just three months!",
    author: "Shubham Paliwal",
  },
  {
    id: 5,
    image: "/assets/img/testi-1.jpg",
    text: "Having a more customized care plan made all the difference. The sessions helped me focus on solutions, and the medications provided fast relief.",
    author: "Ronish Gupta",
  },
];

const Testimonial = () => {
  const [testimonialData, setTestimonialData] = useState([]);

  const { data, error, isError } = useQuery({
    queryKey: ["get-testimonial-api"],
    queryFn: () =>
      getAPIAuth(`${API_GET_TESTIMONIALS}?domain=${process.env.NEXT_PUBLIC_DOMAIN}`),
  });

  useEffect(() => {
    if (data?.data?.data?.length > 0) {
      setTestimonialData(data?.data?.data);
    }
  }, [data]);

  return (
    <>
        {
            testimonialData?.length > 0 && 
            <section className="py-16 bg-[#F8E9E6]">
                <div className="max-w-7xl px-6 lg:px-8 mx-auto">
                <div className="text-center px-4">
                    <h5 className="text-2xl md:text-3xl lg:text-4xl font-bold mb-2">
                    Real Stories, Real Transformations
                    </h5>
                    <h6 className="text-lg md:text-xl lg:text-2xl">
                    Discover how our personalized care has changed lives for the
                    better.
                    </h6>
                </div>
                <Swiper
                    autoplay={{ delay: 3000, disableOnInteraction: false }}
                    pagination={false}
                    modules={[Pagination, Autoplay]}
                    className="mySwiper"
                >
                    {testimonialData?.map((testimonial,index) => (
                    <SwiperSlide key={index}>
                        <div className="mt-12">
                        <div className="">
                            <div className="flex items-center justify-center mb-8">
                            <Image
                                width={1000}
                                height={1000}
                                src={testimonial?.image}
                                alt=""
                                className="rounded-full h-40 w-40 object-cover tex-center"
                            />
                            </div>
                        </div>
                        <div className="">
                            <div className="text-center">
                            <h1 className="text-lg md:text-xl lg:text-2xl font-semibold">
                                {testimonial?.description}
                            </h1>
                            <p className="relative mt-4 inline-block">
                                <span className="before:absolute before:content-[''] before:w-full before:h-[2px] before:bg-black before:bottom-0 before:left-0"></span>
                                {testimonial?.name}
                            </p>
                            </div>
                        </div>
                        </div>
                    </SwiperSlide>
                    ))}
                </Swiper>
                </div>
            </section>
        }
    </>
  );
};

export default Testimonial;