"use client";

import useEmblaCarousel from "embla-carousel-react";

import { useCallback, useEffect, useRef } from "react";
import ReviewCard from "./Review";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { debounce } from "lodash";

const ReviewsCarousel = ({ reviews }: { reviews: any[] }) => {
  const [emblaRef, emblaApi] = useEmblaCarousel();
  const prevBtnRef = useRef<HTMLButtonElement>(null);
  const nextBtnRef = useRef<HTMLButtonElement>(null);

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev();
  }, [emblaApi]);

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext();
  }, [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    emblaApi.on(
      "scroll",
      debounce(() => {
        emblaApi.canScrollPrev()
          ? prevBtnRef.current?.classList.add("enabled")
          : prevBtnRef.current?.classList.remove("enabled");
        emblaApi.canScrollNext()
          ? nextBtnRef.current?.classList.add("enabled")
          : nextBtnRef.current?.classList.remove("enabled");
      }, 10)
    );
  }, [emblaApi]);
  return (
    <div className="reviews embla">
      <div ref={emblaRef} className="embla__viewport">
        <ul className="reviews__list embla__container">
          {reviews.map((review, i) => (
            <li key={review.name} className="reviews__item embla__slide">
              <ReviewCard review={review} />
            </li>
          ))}
        </ul>
      </div>
      <div className="reviews__controls">
        <button
          ref={prevBtnRef}
          className="btn reviews__control-btn embla__prev"
          onClick={scrollPrev}
        >
          <ChevronLeftIcon className="icon" />
        </button>
        <button
          ref={nextBtnRef}
          className="btn reviews__control-btn embla__next enabled"
          onClick={scrollNext}
        >
          <ChevronRightIcon className="icon" />
        </button>
      </div>
    </div>
  );
};
export default ReviewsCarousel;