"use client";

import React, { useEffect, useState, useCallback } from "react";
import useEmblaCarousel from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import Image from "next/image";
import ReviewSlide, { Review } from "./Review";

const reviews: Review[] = [
  {
    imageSrc: "/assets/images/interior2.webp",
    quote: "waalook has completely transformed the way I plan my report...",
    name: "Azubuike Duru",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior.webp",
    quote: "Another review quote here...",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior2.webp",
    quote: "Another review quote here...",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior.webp",
    quote: "Another review quote here...",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior.webp",
    quote: "Another review quote here...",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior2.webp",
    quote: "Another review quote here...",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior.webp",
    quote: "Another review quote here...",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
];

const ReviewSection = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });
  const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
  const [nextBtnEnabled, setNextBtnEnabled] = useState(false);

  const scrollPrev = useCallback(
    () => emblaApi && emblaApi.scrollPrev(),
    [emblaApi]
  );
  const scrollNext = useCallback(
    () => emblaApi && emblaApi.scrollNext(),
    [emblaApi]
  );

  const onSelect = useCallback(() => {
    if (!emblaApi) return;
    setPrevBtnEnabled(emblaApi.canScrollPrev());
    setNextBtnEnabled(emblaApi.canScrollNext());
  }, [emblaApi]);

  useEffect(() => {
    if (!emblaApi) return;
    emblaApi.on("select", onSelect);
    onSelect();
  }, [emblaApi, onSelect]);

  return (
    <div className="container relative mx-auto py-6 md:py-12">
      <h2 className="mb-4">Features</h2>
      <div className="embl ">
        <div className="embla__viewport overflow-hidden" ref={emblaRef}>
          <div className="flex">
            {reviews.map((review, index) => (
              <ReviewSlide key={index} review={review} />
            ))}
          </div>
        </div>

        <button
          className={`absolute top-0 right-16 md:right-20 transform translate-y-6 md:translate-y-12 bg-black text-white p-2 rounded-full shadow-md ${
            !prevBtnEnabled ? "opacity-50" : ""
          }`}
          onClick={scrollPrev}
          disabled={!prevBtnEnabled}
        >
          <ArrowLeft size={20} />
        </button>

        <button
          className={`absolute top-0 right-5 md:right-8 transform translate-y-6 md:translate-y-12 bg-black text-white p-2 rounded-full shadow-md ${
            !nextBtnEnabled ? "opacity-50" : ""
          }`}
          onClick={scrollNext}
          disabled={!nextBtnEnabled}
        >
          <ArrowRight size={20} />
        </button>
      </div>
    </div>
  );
};

export default ReviewSection;