import { Quote, ChevronLeft, ChevronRight } from "lucide-react";
import { testimonials } from "./data";
import useEmblaCarousel from "embla-carousel-react";
import Autoplay from "embla-carousel-autoplay";
import { useCallback } from "react";

function initials(name: string) {
  return name
    .split(" ")
    .slice(0, 2)
    .map((part) => part[0])
    .join("")
    .toUpperCase();
}

export function Testimonials() {
  const [emblaRef, emblaApi] = useEmblaCarousel(
    {
      align: "start",
      loop: true,
      skipSnaps: false,
    },
    [Autoplay({ delay: 5000, stopOnInteraction: true })]
  );

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

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

  return (
    <section id="depoimentos" className="border-y border-border bg-surface py-20 sm:py-24 overflow-hidden">
      <div className="mx-auto max-w-6xl px-5">
        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-6">
          <div>
            <p className="text-xs tracking-widest text-primary uppercase font-medium">Depoimentos</p>
            <h2 className="mt-3 max-w-2xl font-display text-3xl font-bold sm:text-4xl">
              Quem já trabalha com a gente
            </h2>
          </div>
          
          <div className="flex gap-2">
            <button
              onClick={scrollPrev}
              className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground transition-colors hover:bg-primary/5 hover:text-primary focus:outline-hidden focus:ring-2 focus:ring-primary/20"
              aria-label="Depoimento anterior"
            >
              <ChevronLeft size={20} />
            </button>
            <button
              onClick={scrollNext}
              className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground transition-colors hover:bg-primary/5 hover:text-primary focus:outline-hidden focus:ring-2 focus:ring-primary/20"
              aria-label="Próximo depoimento"
            >
              <ChevronRight size={20} />
            </button>
          </div>
        </div>

        <div className="mt-12 embla" ref={emblaRef}>
          <div className="embla__container flex gap-5">
            {testimonials.map((item, index) => (
              <div 
                key={`${item.name}-${index}`} 
                className="embla__slide min-w-0 flex-[0_0_100%] md:flex-[0_0_calc(50%-10px)] lg:flex-[0_0_calc(33.333%-13.333px)]"
              >
                <figure className="flex h-full flex-col justify-between rounded-xl border border-border bg-card p-7 shadow-xs">
                  <div>
                    <Quote size={22} className="text-primary/40" aria-hidden="true" />
                    <blockquote className="mt-4 text-[0.9375rem] leading-relaxed text-foreground/90">
                      "{item.quote}"
                    </blockquote>
                  </div>
                  <figcaption className="mt-8 flex items-center gap-3 border-t border-border pt-5">
                    <span
                      aria-hidden="true"
                      className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 font-display text-xs font-bold text-primary"
                    >
                      {initials(item.name)}
                    </span>
                    <span>
                      <span className="block font-display text-sm font-semibold">{item.name}</span>
                      <span className="block text-[0.75rem] text-muted-foreground">{item.role}</span>
                    </span>
                  </figcaption>
                </figure>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}