import * as React from "react" import { motion, PanInfo } from "framer-motion" import { cn } from "@/lib/utils" interface Testimonial { id: number | string name: string avatar: string description: string } interface TestimonialCarouselProps extends React.HTMLAttributes { testimonials: Testimonial[] showArrows?: boolean showDots?: boolean } const TestimonialCarousel = React.forwardRef< HTMLDivElement, TestimonialCarouselProps >( ( { className, testimonials, showArrows = true, showDots = true, ...props }, ref, ) => { const [currentIndex, setCurrentIndex] = React.useState(0) const [exitX, setExitX] = React.useState(0) const handleDragEnd = ( event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo, ) => { if (Math.abs(info.offset.x) > 100) { setExitX(info.offset.x) setTimeout(() => { setCurrentIndex((prev) => (prev + 1) % testimonials.length) setExitX(0) }, 200) } } return (

{testimonials.map((testimonial, index) => { const isCurrentCard = index === currentIndex const isPrevCard = index === (currentIndex + 1) % testimonials.length const isNextCard = index === (currentIndex + 2) % testimonials.length if (!isCurrentCard && !isPrevCard && !isNextCard) return null return ( {showArrows && isCurrentCard && (

← →

)}

{testimonial.name}

{testimonial.description}

) })} {showDots && (

{testimonials.map((_, index) => (

))}

)}

) }, ) TestimonialCarousel.displayName = "TestimonialCarousel" export { TestimonialCarousel, type Testimonial }