"use client";

import React, { useState } from "react";
import Link from "next/link";
import { ServiceReview } from "@/services/joomlaService";

interface PricingReviewsSliderProps {
  reviews: ServiceReview[];
}

export function PricingReviewsSlider({ reviews }: PricingReviewsSliderProps) {
  const [currentIndex, setCurrentIndex] = useState(0);

  // Default fallback if bridge reviews empty
  const reviewList = reviews.length > 0 ? reviews : [];

  const maxIndex = Math.max(0, reviewList.length - 3);

  const handlePrev = () => {
    setCurrentIndex((prev) => Math.max(0, prev - 1));
  };

  const handleNext = () => {
    setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
  };

  return (
    <div className="reviews">
      <div className="container">
        <div className="head">
          Here’s Why We Are the Best!
          <p>Know What Our Customers from Top Universities Have to Say About Us!</p>
        </div>

        <div className="review-slider">
          <ul
            className="review-slider-track"
            style={{
              transform: `translateX(-${currentIndex * (100 / 3)}%)`,
            }}
          >
            {reviewList.map((review, idx) => (
              <li key={review.id || idx} className="review-list">
                <i className="quotes" />
                <p className="contentreview">{review.comment}</p>
                <div className="topstr">
                  <p>
                    <span>{review.position || review.name}</span>
                    {review.country}
                  </p>
                  <label className="rat-str">
                    {review.rating}
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="11.01"
                      height="10.28"
                      viewBox="0 0 11.01 10.28"
                    >
                      <g transform="translate(-0.471 -0.702)">
                        <path
                          data-name="Path 73917"
                          d="M5.771.623l1.4,3.245,3.588.3a.275.275,0,0,1,.161.481L8.2,6.96l.816,3.432a.281.281,0,0,1-.422.3L5.511,8.876,2.427,10.692a.281.281,0,0,1-.422-.3L2.821,6.96.1,4.653A.275.275,0,0,1,.26,4.172l3.588-.3L5.25.623a.285.285,0,0,1,.521,0Z"
                          transform="translate(0.466 0.248)"
                          fill="#ff8100"
                        />
                      </g>
                    </svg>
                  </label>
                </div>
              </li>
            ))}
          </ul>

          <button
            type="button"
            className={`slick-prev ${currentIndex === 0 ? "slick-disabled" : ""}`}
            onClick={handlePrev}
            disabled={currentIndex === 0}
            aria-label="Previous Review"
          >
            Previous
          </button>
          <button
            type="button"
            className={`slick-next ${currentIndex >= maxIndex ? "slick-disabled" : ""}`}
            onClick={handleNext}
            disabled={currentIndex >= maxIndex}
            aria-label="Next Review"
          >
            Next
          </button>
        </div>

        <Link href="/reviews" className="btn-review">
          View All Reviews
        </Link>
      </div>
    </div>
  );
}