Update src/components/sections/feature/FeatureCardMedia.tsx

src/components/sections/feature/FeatureCardMedia.tsx

@@ -1,261 +1,141 @@
 "use client";
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import Tag from "@/components/shared/Tag";
-import Button from "@/components/button/Button";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React, { useMemo } from "react";
+import CardStack from "@/components/card/CardStack";
+import TextBox from "@/components/Textbox";
+import type { CardAnimationType } from "@/types/animations";
 
-type FeatureCard = {
+export interface FeatureCardMediaProps {
+  features?: Array<{
     id: string;
     title: string;
     description: string;
-    tag: string;
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    buttons?: ButtonConfig[];
-    onCardClick?: () => void;
-};
-
-interface FeatureCardMediaProps {
-    features: FeatureCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    itemClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    tagClassName?: string;
-    contentClassName?: string;
-    cardTitleClassName?: string;
-    cardDescriptionClassName?: string;
-    cardButtonContainerClassName?: string;
-    cardButtonClassName?: string;
-    cardButtonTextClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+    icon?: React.ReactNode;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+  }>;
+  gridVariant?: string;
+  uniformGridCustomHeightClasses?: string;
+  animationType?: CardAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
+  tag?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  useInvertedBackground?: boolean;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  mediaClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardIconClassName?: string;
+  cardIconWrapperClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  buttonTextClassName?: string;
 }
 
-interface FeatureCardItemProps {
-    feature: FeatureCard;
-    shouldUseLightText: boolean;
-    useInvertedBackground: InvertedBackground;
-    itemClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    tagClassName?: string;
-    contentClassName?: string;
-    cardTitleClassName?: string;
-    cardDescriptionClassName?: string;
-    cardButtonContainerClassName?: string;
-    cardButtonClassName?: string;
-    cardButtonTextClassName?: string;
-}
-
-const FeatureCardItem = memo(({
-    feature,
-    shouldUseLightText,
-    useInvertedBackground,
-    itemClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    tagClassName = "",
-    contentClassName = "",
-    cardTitleClassName = "",
-    cardDescriptionClassName = "",
-    cardButtonContainerClassName = "",
-    cardButtonClassName = "",
-    cardButtonTextClassName = "",
-}: FeatureCardItemProps) => {
-    const theme = useTheme();
-
-    return (
-        <article
-            className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
-            onClick={feature.onCardClick}
-            role="article"
-            aria-label={feature.title}
+const FeatureCardMedia: React.FC<FeatureCardMediaProps> = ({
+  features = [],
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
+  titleSegments,
+  description = "",  tag,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout = "default",  useInvertedBackground = false,
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  buttonTextClassName = ""}) => {
+  const cardItems = useMemo(
+    () =>
+      features.map((feature) => (
+        <div
+          key={feature.id}
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
         >
-            <div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
-                <MediaContent
-                    imageSrc={feature.imageSrc}
-                    videoSrc={feature.videoSrc}
-                    imageAlt={feature.imageAlt || feature.title}
-                    videoAriaLabel={feature.videoAriaLabel || feature.title}
-                    imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
+          {feature.icon && (
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
+            </div>
+          )}
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
+            {feature.title}
+          </h3>
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
+            {feature.description}
+          </p>
+          {feature.mediaItems && (
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
+              {feature.mediaItems.map((media, idx) => (
+                <img
+                  key={idx}
+                  src={media.src}
+                  alt={media.alt || "Feature media"}
+                  className="w-full h-20 object-cover rounded-lg"
                 />
-                <div className="absolute top-4 right-4">
-                    <Tag
-                        text={feature.tag}
-                        useInvertedBackground={useInvertedBackground}
-                        className={tagClassName}
-                    />
-                </div>
+              ))}
             </div>
+          )}
+        </div>
+      )),
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
 
-            <div className={cls("relative z-1 card rounded-theme-capped p-6 flex flex-col gap-2 flex-1", contentClassName)}>
-                <h3 className={cls(
-                    "text-xl md:text-2xl font-medium leading-tight",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    cardTitleClassName
-                )}>
-                    {feature.title}
-                </h3>
-
-                <p className={cls(
-                    "text-base leading-tight",
-                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
-                    cardDescriptionClassName
-                )}>
-                    {feature.description}
-                </p>
-
-                {feature.buttons && feature.buttons.length > 0 && (
-                    <div className={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", cardButtonContainerClassName)}>
-                        {feature.buttons.slice(0, 2).map((button, index) => (
-                            <Button
-                                key={`${button.text}-${index}`}
-                                {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)}
-                            />
-                        ))}
-                    </div>
-                )}
-            </div>
-        </article>
-    );
-});
-
-FeatureCardItem.displayName = "FeatureCardItem";
-
-const FeatureCardMedia = ({
-    features,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Features section",
-    className = "",
-    containerClassName = "",
-    itemClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    tagClassName = "",
-    contentClassName = "",
-    cardTitleClassName = "",
-    cardDescriptionClassName = "",
-    cardButtonContainerClassName = "",
-    cardButtonClassName = "",
-    cardButtonTextClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: FeatureCardMediaProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
+  return (
+    <div
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
+      aria-label={ariaLabel}
+    >
+      {title && (
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
+          <TextBox
             title={title}
             titleSegments={titleSegments}
             description={description}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
             textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
             titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
             descriptionClassName={textBoxDescriptionClassName}
             tagClassName={textBoxTagClassName}
             buttonContainerClassName={textBoxButtonContainerClassName}
             buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
+            buttonTextClassName={buttonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
         >
-            {features.map((feature) => (
-                <FeatureCardItem
-                    key={feature.id}
-                    feature={feature}
-                    shouldUseLightText={shouldUseLightText}
-                    useInvertedBackground={useInvertedBackground}
-                    itemClassName={itemClassName}
-                    mediaWrapperClassName={mediaWrapperClassName}
-                    mediaClassName={mediaClassName}
-                    tagClassName={tagClassName}
-                    contentClassName={contentClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    cardDescriptionClassName={cardDescriptionClassName}
-                    cardButtonContainerClassName={cardButtonContainerClassName}
-                    cardButtonClassName={cardButtonClassName}
-                    cardButtonTextClassName={cardButtonTextClassName}
-                />
-            ))}
+          {cardItems.map((item) => item)}
         </CardStack>
-    );
+      </div>
+    </div>
+  );
 };
 
-FeatureCardMedia.displayName = "FeatureCardMedia";
-
-export default FeatureCardMedia;
+export default FeatureCardMedia;