Testimonials Card

"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

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

interface TestimonialsCardProps {
    testimonials: Testimonial[];
    autoPlay?: boolean;
    interval?: number;
}

export function TestimonialsCard({ testimonials, autoPlay = true, interval = 4000 }: TestimonialsCardProps) {
    const [index, setIndex] = useState(0);
    const [direction, setDirection] = useState(1);

    const go = (next: number) => {
        setDirection(next > index ? 1 : -1);
        setIndex(next);
    };

    useEffect(() => {
        if (!autoPlay) return;
        const t = setInterval(() => {
            setDirection(1);
            setIndex((i) => (i + 1) % testimonials.length);
        }, interval);
        return () => clearInterval(t);
    }, [autoPlay, interval, testimonials.length]);

    const t = testimonials[index];

    return (
        <div className="relative w-full max-w-lg p-8 rounded-2xl bg-zinc-900 border border-white/10 overflow-hidden">
            {/* Quote mark */}
            <span className="absolute top-6 right-8 text-6xl text-white/5 font-serif select-none leading-none">&ldquo;</span>

            <AnimatePresence mode="wait" custom={direction}>
                <motion.div
                    key={index}
                    custom={direction}
                    initial={{ opacity: 0, x: direction * 40 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: -direction * 40 }}
                    transition={{ duration: 0.35, ease: "easeInOut" }}
                >
                    <p className="text-zinc-200 text-base leading-relaxed mb-6">
                        &ldquo;{t.quote}&rdquo;
                    </p>
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm shrink-0">
                            {t.name[0]}
                        </div>
                        <div>
                            <p className="text-white font-semibold text-sm">{t.name}</p>
                            {t.title && <p className="text-zinc-500 text-xs">{t.title}</p>}
                        </div>
                    </div>
                </motion.div>
            </AnimatePresence>

            {/* Dots */}
            <div className="flex items-center gap-1.5 mt-6">
                {testimonials.map((_, i) => (
                    <button
                        key={i}
                        onClick={() => go(i)}
                        className={`h-1.5 rounded-full transition-all duration-300 ${i === index ? "w-5 bg-indigo-400" : "w-1.5 bg-white/20 hover:bg-white/40"}`}
                        aria-label={`Go to testimonial ${i + 1}`}
                    />
                ))}
            </div>
        </div>
    );
}