"use client" import * as React from "react" import { cn } from "@/lib/utils" import { ChevronLeft, ChevronRight } from "lucide-react" interface CarouselContextValue { currentIndex: number totalSlides: number scrollTo: (index: number) => void scrollPrev: () => void scrollNext: () => void } const CarouselContext = React.createContext(null) function useCarousel() { const ctx = React.useContext(CarouselContext) if (!ctx) throw new Error("Carousel sub-components must be used within ") return ctx } export interface CarouselProps { children: React.ReactNode className?: string autoScroll?: boolean autoScrollInterval?: number } function Carousel({ children, className, autoScroll = false, autoScrollInterval = 5000, }: CarouselProps) { const [currentIndex, setCurrentIndex] = React.useState(0) const childrenArray = React.Children.toArray(children) const totalSlides = childrenArray.length const scrollTo = React.useCallback( (index: number) => { setCurrentIndex(Math.max(0, Math.min(index, totalSlides - 1))) }, [totalSlides] ) const scrollPrev = React.useCallback(() => { setCurrentIndex((prev) => (prev === 0 ? totalSlides - 1 : prev - 1)) }, [totalSlides]) const scrollNext = React.useCallback(() => { setCurrentIndex((prev) => (prev === totalSlides - 1 ? 0 : prev + 1)) }, [totalSlides]) React.useEffect(() => { if (!autoScroll || totalSlides <= 1) return const id = setInterval(() => { scrollNext() }, autoScrollInterval) return () => clearInterval(id) }, [autoScroll, autoScrollInterval, scrollNext, totalSlides]) const contextValue = React.useMemo( () => ({ currentIndex, totalSlides, scrollTo, scrollPrev, scrollNext }), [currentIndex, totalSlides, scrollTo, scrollPrev, scrollNext] ) return (

{children}

) } Carousel.displayName = "Carousel" const CarouselContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { currentIndex } = useCarousel() return (

) }) CarouselContent.displayName = "CarouselContent" const CarouselItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (

)) CarouselItem.displayName = "CarouselItem" const CarouselPrevious = React.forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ className, ...props }, ref) => { const { scrollPrev } = useCarousel() return ( ) }) CarouselPrevious.displayName = "CarouselPrevious" const CarouselNext = React.forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ className, ...props }, ref) => { const { scrollNext } = useCarousel() return ( ) }) CarouselNext.displayName = "CarouselNext" export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, }