"use client";

import { useEffect, useState } from "react";

export interface Testimonial {
  quote: string;
  name: string;
  title: string;
  avatar: string;
}

/** Auto-advancing single-slide testimonial carousel with manual dot navigation —
 *  a lightweight stand-in for the reference's Elementor Pro testimonial-carousel widget. */
export default function TestimonialCarousel({ slides }: { slides: Testimonial[] }) {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setIndex((i) => (i + 1) % slides.length), 5000);
    return () => clearInterval(id);
  }, [slides.length]);

  if (slides.length === 0) return null;
  const slide = slides[index] ?? slides[0]!;

  return (
    <div className="max-w-2xl mx-auto text-center">
      <div key={index} className="flex flex-col items-center gap-5">
        <div className="h-16 w-16 rounded-full bg-neutral-200 overflow-hidden flex items-center justify-center text-lg font-display font-black text-ink">
          {slide.name
            .split(" ")
            .map((p) => p[0])
            .join("")
            .slice(0, 2)}
        </div>
        <p className="font-display text-lg sm:text-xl text-ink leading-relaxed">&ldquo;{slide.quote}&rdquo;</p>
        <div>
          <div className="font-display font-bold text-ink">{slide.name}</div>
          <div className="text-sm text-neutral-600">{slide.title}</div>
        </div>
      </div>

      <div className="mt-8 flex items-center justify-center gap-2">
        {slides.map((s, i) => (
          <button
            key={s.name}
            type="button"
            aria-label={`Show testimonial from ${s.name}`}
            onClick={() => setIndex(i)}
            className={`h-2 rounded-full transition-all ${
              i === index ? "w-6 bg-ink" : "w-2 bg-neutral-300 hover:bg-neutral-400"
            }`}
          />
        ))}
      </div>
    </div>
  );
}