import React, { useEffect, useState } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import apiInstance from "@/interceptor/instance";

type Review = {
  userName: string;
  description: string;
  rating: number;
};

const TestimonialCard = () => {
  const [reviewData, setReviewData] = useState<Review[]>([]);

  // Fetch review data from API
  useEffect(() => {
    const fetchReviews = async () => {
      try {
        const res = await apiInstance.get("/api/review");
        if (Array.isArray(res.data.data)) {
          setReviewData(res.data.data.reverse());
        } else {
          console.error("Unexpected data format:", res.data);
        }
      } catch (error) {
        console.error("Failed to fetch review data:", error);
      }
    };

    fetchReviews();
  }, []);

  // Slider settings
  const settings = {
    dots: false,
    infinite: true,
    speed: 1000,
    autoplay: true,
    slidesToShow: 2,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };

  return (
    <div className="py-8 flex justify-center">
      <div className="w-full">
        {/* Container div with padding */}
        <div className="slider-container sm:px-24 px-8 bg-gray-900 shadow-md">
          <h2 className="text-2xl sm:text-3xl font-semibold text-center text-gray-100 pt-5">
            Customer Reviews
          </h2>
          {/* Added padding and border radius */}
          <Slider {...settings}>
            {reviewData.length > 0 ? (
              reviewData.map((item, index) => (
                <div key={index} className="pt-[1.2rem] pb-[2.5rem]">
                  <div className="relative bg-white text-center max-w-lg p-6 sm:p-14 rounded-3xl shadow-lg mx-4">
                    {/* Testimonial Content */}
                    <p className="text-gray-700 h-24 text-justify overflow-hidden hover:overflow-y-auto">
                      {item.description}
                    </p>

                    {/* Chat Bubble Tail */}
                    <div className="absolute bottom-0 right-10 w-6 h-6 bg-white transform rotate-45 translate-y-3 shadow-md"></div>
                    <h1 className="text-right font-semibold sm:text-2xl text-xl pt-[1rem]">
                      {item.userName}
                    </h1>
                  </div>
                </div>
              ))
            ) : (
              <div className="bg-white w-full text-center py-8">Loading...</div>
            )}
          </Slider>
        </div>
      </div>
    </div>
  );
};

export default TestimonialCard;