From bab04bed9785e3b44e54b0862540f158e8624d8a Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 19:07:04 +0000
Subject: [PATCH] Switch to version 1: modified
 src/components/cardStack/layouts/carousels/AutoCarousel.tsx

---
 .../layouts/carousels/AutoCarousel.tsx        | 182 ++++++++++++++----
 1 file changed, 141 insertions(+), 41 deletions(-)

diff --git a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
index f3cbdeb..85ad98e 100644
--- a/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
+++ b/src/components/cardStack/layouts/carousels/AutoCarousel.tsx
@@ -1,48 +1,148 @@
-import React, { useRef } from 'react';
-import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation';
+"use client";
 
-export interface AutoCarouselProps {
-  children: React.ReactNode;
-  title?: string;
-  description?: string;
-  textboxLayout?: string;
-  animationType?: string;
-  className?: string;
-  carouselClassName?: string;
-  containerClassName?: string;
-  itemClassName?: string;
-  ariaLabel?: string;
-  showTextBox?: boolean;
-  tag?: string;
-  tagIcon?: any;
-  tagAnimation?: string;
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: string;
-  titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>;
-}
+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";
 
-export const AutoCarousel: React.FC<AutoCarouselProps> = ({
-  children,
-  containerClassName = '',
-  ...props
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const bottomContentRef = useRef<HTMLDivElement>(null);
+const AutoCarousel = ({
+    children,
+    uniformGridCustomHeightClasses,
+    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
+    });
 
-  const animationOptions: UseCardAnimationOptions = {
-    containerRef,
-    itemRefs,
-    bottomContentRef,
-  };
+    // Bottom marquee direction is opposite of top
+    const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left";
 
-  const { } = useCardAnimation(animationOptions);
+    // Reverse order for bottom marquee to avoid alignment with top
+    const bottomChildren = dualMarquee ? [...childrenArray].reverse() : [];
 
-  return (
-    <div ref={containerRef} className={containerClassName}>
-      {children}
-    </div>
-  );
+    return (
+        <section
+            className={cls(
+                "relative py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+            aria-live="off"
+        >
+            <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>
+    );
 };
 
-export default AutoCarousel;
+AutoCarousel.displayName = "AutoCarousel";
+
+export default memo(AutoCarousel);