From d4eb191f69fec958c44864d6eee910e5b69a2f57 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 21:29:29 +0000
Subject: [PATCH] Update
 src/components/cardStack/layouts/carousels/AutoCarousel.tsx

---
 .../layouts/carousels/AutoCarousel.tsx        | 187 +++++-------------
 1 file changed, 47 insertions(+), 140 deletions(-)

diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
index 85ad98e..ea02de4 100644
--- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
@@ -1,148 +1,55 @@
-"use client";
+'use client';
 
-import { memo, Children } from "react";
-import Marquee from "react-fast-marquee";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import { AutoCarouselProps } from "../../types";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
+import React, { useRef, useEffect } from 'react';
+import { useCardAnimation } from '@/hooks/useCardAnimation';
+import { cn } from '@/lib/utils';
 
-const AutoCarousel = ({
-    children,
-    uniformGridCustomHeightClasses,
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+
+interface AutoCarouselProps {
+  children: React.ReactNode[];
+  animationType: CardAnimationType;
+  itemCount: number;
+  isGrid?: boolean;
+  className?: string;
+}
+
+export const AutoCarousel: React.FC<AutoCarouselProps> = ({
+  children,
+  animationType,
+  itemCount,
+  isGrid = false,
+  className,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const { itemRefs: animationItemRefs } = useCardAnimation({
     animationType,
-    speed = 50,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout = "default",
-    useInvertedBackground,
-    bottomContent,
-    className = "",
-    containerClassName = "",
-    carouselClassName = "",
-    itemClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    ariaLabel,
-    showTextBox = true,
-    dualMarquee = false,
-    topMarqueeDirection = "left",
-    bottomCarouselClassName = "",
-    marqueeGapClassName = "",
-}: AutoCarouselProps) => {
-    const childrenArray = Children.toArray(children);
-    const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
-    const { itemRefs, bottomContentRef } = useCardAnimation({
-        animationType,
-        itemCount: childrenArray.length,
-        isGrid: false
-    });
+    itemCount,
+    isGrid,
+  });
 
-    // Bottom marquee direction is opposite of top
-    const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left";
+  useEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
+  }, [itemCount]);
 
-    // Reverse order for bottom marquee to avoid alignment with top
-    const bottomChildren = dualMarquee ? [...childrenArray].reverse() : [];
-
-    return (
-        <section
-            className={cls(
-                "relative py-20 w-full",
-                useInvertedBackground && "bg-foreground",
-                className
-            )}
-            aria-label={ariaLabel}
-            aria-live="off"
+  return (
+    <div ref={containerRef} className={cn('auto-carousel', className)}>
+      {React.Children.map(children, (child, index) => (
+        <div
+          key={index}
+          ref={(el) => {
+            if (el) itemRefs.current[index] = el;
+            if (animationItemRefs && animationItemRefs[index]) animationItemRefs[index].current = el;
+          }}
+          className="carousel-item"
         >
-            <div className={cls("w-full md:w-content-width mx-auto", containerClassName)}>
-                <div className="w-full flex flex-col items-center">
-                    <div className="w-full flex flex-col gap-6">
-                        {showTextBox && (title || titleSegments || description) && (
-                            <CardStackTextBox
-                                title={title}
-                                titleSegments={titleSegments}
-                                description={description}
-                                tag={tag}
-                                tagIcon={tagIcon}
-                                tagAnimation={tagAnimation}
-                                buttons={buttons}
-                                buttonAnimation={buttonAnimation}
-                                textboxLayout={textboxLayout}
-                                useInvertedBackground={useInvertedBackground}
-                                textBoxClassName={textBoxClassName}
-                                titleClassName={titleClassName}
-                                titleImageWrapperClassName={titleImageWrapperClassName}
-                                titleImageClassName={titleImageClassName}
-                                descriptionClassName={descriptionClassName}
-                                tagClassName={tagClassName}
-                                buttonContainerClassName={buttonContainerClassName}
-                                buttonClassName={buttonClassName}
-                                buttonTextClassName={buttonTextClassName}
-                            />
-                        )}
-
-                        <div
-                            className={cls(
-                                "w-full flex flex-col",
-                                marqueeGapClassName || "gap-6"
-                            )}
-                        >
-                            {/* Top/Single Marquee */}
-                            <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", carouselClassName)}>
-                                <Marquee gradient={false} speed={speed} direction={topMarqueeDirection}>
-                                    {Children.map(childrenArray, (child, index) => (
-                                        <div
-                                            key={index}
-                                            className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
-                                            ref={(el) => { itemRefs.current[index] = el; }}
-                                        >
-                                            {child}
-                                        </div>
-                                    ))}
-                                </Marquee>
-                            </div>
-
-                            {/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */}
-                            {dualMarquee && (
-                                <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", bottomCarouselClassName || carouselClassName)}>
-                                    <Marquee gradient={false} speed={speed} direction={bottomMarqueeDirection}>
-                                        {Children.map(bottomChildren, (child, index) => (
-                                            <div
-                                                key={`bottom-${index}`}
-                                                className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
-                                            >
-                                                {child}
-                                            </div>
-                                        ))}
-                                    </Marquee>
-                                </div>
-                            )}
-                        </div>
-                        {bottomContent && (
-                            <div ref={bottomContentRef}>
-                                {bottomContent}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
+          {child}
+        </div>
+      ))}
+    </div>
+  );
 };
 
-AutoCarousel.displayName = "AutoCarousel";
-
-export default memo(AutoCarousel);
+export default AutoCarousel;