Animated Testimonials

"use client";
import { useEffect, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight } from "lucide-react";

type State = "first" | "second" | "third";

const Q = [
{ name: "陳冠廷", role: "前端工程師", quote: "最完整的前端模式收藏。", color: "from-rose-400 to-orange-500" },
{ name: "Sarah Kim", role: "Design Engineer", quote: "Apple 系列動效救了我們的 onboarding。", color: "from-emerald-400 to-teal-500" },
{ name: "Yuki Tanaka", role: "Indie Hacker", quote: "從 hero 到 footer 全有,landing 半天搞定。", color: "from-blue-400 to-violet-500" },
];

export function AnimatedTestimonials({ state = "first" }: { state?: State }) {
const idx = state === "second" ? 1 : state === "third" ? 2 : 0;
const [active, setActive] = useState(idx);
useEffect(() => setActive(idx), [idx]);

const t = Q[active];

return (
  <div className="w-full max-w-xl">
    <div className="grid grid-cols-[120px_1fr] gap-5 rounded-xl border border-border bg-background/30 p-5">
      <div className="relative h-32 w-30">
        <AnimatePresence mode="wait">
          <motion.div
            key={active}
            initial={{ opacity: 0, scale: 0.92, rotate: -4 }}
            animate={{ opacity: 1, scale: 1, rotate: 0 }}
            exit={{ opacity: 0, scale: 0.92, rotate: 4 }}
            transition={{ duration: 0.35 }}
            className={`grid h-full w-full place-items-center rounded-xl bg-gradient-to-br ${t.color}`}
          >
            <span className="font-mono text-2xl text-white/80">{t.name[0]}</span>
          </motion.div>
        </AnimatePresence>
      </div>
      <div className="flex flex-col justify-between">
        <AnimatePresence mode="wait">
          <motion.div
            key={active}
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            transition={{ duration: 0.25 }}
          >
            <p className="text-sm italic leading-relaxed text-foreground">"{t.quote}"</p>
            <p className="mt-3 text-xs font-medium">{t.name}</p>
            <p className="font-mono text-[10px] text-muted-foreground">{t.role}</p>
          </motion.div>
        </AnimatePresence>
        <div className="flex gap-2">
          <button
            onClick={() => setActive((a) => (a - 1 + Q.length) % Q.length)}
            className="grid h-7 w-7 place-items-center rounded-full bg-muted hover:bg-lab-accent/15"
          >
            <ChevronLeft className="h-3 w-3" />
          </button>
          <button
            onClick={() => setActive((a) => (a + 1) % Q.length)}
            className="grid h-7 w-7 place-items-center rounded-full bg-muted hover:bg-lab-accent/15"
          >
            <ChevronRight className="h-3 w-3" />
          </button>
        </div>
      </div>
    </div>
  </div>
);
}