import { ChevronLeft, ChevronRight, Star } from "lucide-react";
import { useEffect, useState } from "react";
import { testimonials } from "./content";
import { Button } from "@/components/ui/button";

export function Testimonials() {
  const [i, setI] = useState(0);
  const n = testimonials.length;
  useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % n), 7000);
    return () => clearInterval(t);
  }, [n]);
  const t = testimonials[i] ?? testimonials[0];
  if (!t) return null;
  return (
    <div className="min-w-0 rounded-3xl bg-card/90 px-2 py-6 shadow-xl backdrop-blur sm:p-8 md:p-10">
      <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-1 sm:gap-4">
        <Button variant="ghost" size="icon" aria-label="Previous" onClick={() => setI((i - 1 + n) % n)} className="h-11 w-8 shrink-0 text-muted-foreground hover:text-primary sm:w-11"><ChevronLeft /></Button>
        <div className="min-w-0 text-center">
          <div className="flex justify-center gap-1 text-gold">{Array.from({ length: 5 }).map((_, k) => <Star key={k} className="h-4 w-4 fill-current" />)}</div>
          <p className="mt-4 min-h-44 font-serif text-xl italic leading-snug text-primary sm:min-h-28 md:text-2xl">&ldquo;{t.quote}&rdquo;</p>
          <p className="label-caps mt-4 text-muted-foreground">— {t.name}</p>
        </div>
        <Button variant="ghost" size="icon" aria-label="Next" onClick={() => setI((i + 1) % n)} className="h-11 w-8 shrink-0 text-muted-foreground hover:text-primary sm:w-11"><ChevronRight /></Button>
      </div>
      <div className="mt-2 flex justify-center">
        {testimonials.map((_, k) => (
          <Button variant="ghost" size="icon" key={k} aria-label={`Testimonial ${k + 1}`} aria-pressed={k === i} onClick={() => setI(k)} className="h-11 w-11 rounded-full"><span className={`h-2.5 w-2.5 rounded-full ${k === i ? "bg-primary" : "bg-border"}`} /></Button>
        ))}
      </div>
    </div>
  );
}