"use client";
import * as React from 'react';
import { AnimatePresence, motion } from 'motion/react';
import { cn } from '@hanzo/ui/lib/utils';
import { Avatar, AvatarImage, AvatarFallback } from '@hanzo/ui/primitives/avatar';
import { Card, CardContent } from '@hanzo/ui';
import { jsxs, jsx } from 'react/jsx-runtime';

var AnimatedTestimonials = React.forwardRef(
  ({ className, testimonials, autoPlay = true, duration = 5e3, ...props }, ref) => {
    const [activeIndex, setActiveIndex] = React.useState(0);
    React.useEffect(() => {
      if (!autoPlay) return;
      const interval = setInterval(() => {
        setActiveIndex((prev) => (prev + 1) % testimonials.length);
      }, duration);
      return () => clearInterval(interval);
    }, [autoPlay, duration, testimonials.length]);
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("relative min-h-[200px]", className),
        ...props,
        children: [
          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
            motion.div,
            {
              initial: { opacity: 0, y: 20 },
              animate: { opacity: 1, y: 0 },
              exit: { opacity: 0, y: -20 },
              transition: { duration: 0.5 },
              children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxs("blockquote", { className: "space-y-4", children: [
                /* @__PURE__ */ jsxs("p", { className: "text-lg italic", children: [
                  '"',
                  testimonials[activeIndex].content,
                  '"'
                ] }),
                /* @__PURE__ */ jsxs("footer", { className: "flex items-center gap-4", children: [
                  /* @__PURE__ */ jsxs(Avatar, { children: [
                    /* @__PURE__ */ jsx(AvatarImage, { src: testimonials[activeIndex].avatar }),
                    /* @__PURE__ */ jsx(AvatarFallback, { children: testimonials[activeIndex].author.slice(0, 2).toUpperCase() })
                  ] }),
                  /* @__PURE__ */ jsxs("div", { children: [
                    /* @__PURE__ */ jsx("cite", { className: "not-italic font-medium", children: testimonials[activeIndex].author }),
                    testimonials[activeIndex].role && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
                      testimonials[activeIndex].role,
                      testimonials[activeIndex].company && `, ${testimonials[activeIndex].company}`
                    ] })
                  ] })
                ] })
              ] }) }) })
            },
            activeIndex
          ) }),
          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-2", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => setActiveIndex(index),
              className: cn(
                "h-2 w-2 rounded-full transition-all",
                index === activeIndex ? "w-8 bg-primary" : "bg-muted hover:bg-muted-foreground"
              ),
              "aria-label": `Go to testimonial ${index + 1}`
            },
            index
          )) })
        ]
      }
    );
  }
);
AnimatedTestimonials.displayName = "AnimatedTestimonials";

export { AnimatedTestimonials };
