"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 TestimonialSlide, { Testimonial } from "./Testimonial";

const testimonials: Testimonial[] = [
  {
    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 testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior2.webp",
    quote:
      "Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior.webp",
    quote:
      "Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior.webp",
    quote:
      "Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior2.webp",
    quote:
      "Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
  {
    imageSrc: "/assets/images/interior.webp",
    quote:
      "Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here, Another testimonial quote here",
    name: "John Doe",
    role: "reporter",
    rating: 5,
  },
];

const TestimonialSection = () => {
  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 text-center">Testimonials</h2>
      <div className="embl ">
        <div className="embla__viewport overflow-hidden" ref={emblaRef}>
          <div className="flex">
            {testimonials.map((testimonial, index) => (
              <TestimonialSlide key={index} testimonial={testimonial} />
            ))}
          </div>
        </div>

        <button
          className={`absolute  -bottom-8 md:bottom-0 right-1/2 transform mr-1 bg-black text-white p-2 rounded-full shadow-md ${
            !prevBtnEnabled ? "opacity-50" : ""
          }`}
          onClick={scrollPrev}
          disabled={!prevBtnEnabled}
        >
          <ArrowLeft size={20} />
        </button>

        <button
          className={`absolute -bottom-8 md:bottom-0 left-1/2 transform ml-1 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 TestimonialSection;