From d28296e0abb7f848685e3aec1476294f2e904863 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 3 Mar 2026 05:00:30 +0000
Subject: [PATCH] Update src/components/sections/product/ProductCardFour.tsx

---
 .../sections/product/ProductCardFour.tsx      | 303 +++++-------------
 1 file changed, 84 insertions(+), 219 deletions(-)

diff --git a/src/components/sections/product/ProductCardFour.tsx b/src/components/sections/product/ProductCardFour.tsx
index 303ff14..52b45ab 100644
--- a/src/components/sections/product/ProductCardFour.tsx
+++ b/src/components/sections/product/ProductCardFour.tsx
@@ -1,238 +1,103 @@
 "use client";
 
-import { memo, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import CardStack from "@/components/cardStack/CardStack";
-import ProductImage from "@/components/shared/ProductImage";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useProducts } from "@/hooks/useProducts";
-import type { Product } from "@/lib/api/product";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React from "react";
+import { Heart } from "lucide-react";
 
-type ProductCardFourGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+export interface ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  category?: string;
+  rating?: number;
+  reviewCount?: string;
+  isFavorited?: boolean;
+}
 
-type ProductCard = Product & {
-  variant: string;
-};
-
-interface ProductCardFourProps {
-  products?: ProductCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: ProductCardFourGridVariant;
-  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;
+export interface ProductCardFourProps {
+  products: ProductCard[];
+  title?: string;
+  description?: string;
+  onFavorite?: (productId: string) => void;
   className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  imageClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardNameClassName?: string;
-  cardPriceClassName?: string;
-  cardVariantClassName?: string;
-  actionButtonClassName?: string;
   gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-}
-
-interface ProductCardItemProps {
-  product: ProductCard;
-  shouldUseLightText: boolean;
   cardClassName?: string;
-  imageClassName?: string;
-  cardNameClassName?: string;
-  cardPriceClassName?: string;
-  cardVariantClassName?: string;
-  actionButtonClassName?: string;
 }
 
-const ProductCardItem = memo(({
-  product,
-  shouldUseLightText,
-  cardClassName = "",
-  imageClassName = "",
-  cardNameClassName = "",
-  cardPriceClassName = "",
-  cardVariantClassName = "",
-  actionButtonClassName = "",
-}: ProductCardItemProps) => {
+const ProductCardFour = React.forwardRef<
+  HTMLDivElement,
+  ProductCardFourProps
+>((
+  {
+    products,
+    title,
+    description,
+    onFavorite,
+    className = "",    gridClassName = "",    cardClassName = ""},
+  ref
+) => {
   return (
-    <article
-      className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-      onClick={product.onProductClick}
-      role="article"
-      aria-label={`${product.name} - ${product.price}`}
-    >
-      <ProductImage
-        imageSrc={product.imageSrc}
-        imageAlt={product.imageAlt || product.name}
-        isFavorited={product.isFavorited}
-        onFavoriteToggle={product.onFavorite}
-        showActionButton={true}
-        actionButtonAriaLabel={`View ${product.name} details`}
-        imageClassName={imageClassName}
-        actionButtonClassName={actionButtonClassName}
-      />
+    <div ref={ref} className={`w-full ${className}`}>
+      {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+      {description && (
+        <p className="text-base text-foreground/75 mb-8">{description}</p>
+      )}
+      <div className={`grid grid-cols-1 gap-6 ${gridClassName}`}>
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className={`relative overflow-hidden rounded-lg ${cardClassName}`}
+          >
+            {/* Image Container */}
+            <div className="relative aspect-square bg-card overflow-hidden">
+              {product.imageSrc && (
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt || product.name}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+              )}
+              {/* Favorite Button */}
+              <button
+                onClick={() => onFavorite?.(product.id)}
+                className="absolute top-4 right-4 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
+                aria-label="Add to favorites"
+              >
+                <Heart
+                  className="w-5 h-5"
+                  fill={product.isFavorited ? "currentColor" : "none"}
+                />
+              </button>
+            </div>
 
-      <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex flex-col gap-0 flex-1 min-w-0">
-            <h3 className={cls("text-base font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
-              {product.name}
-            </h3>
-            <p className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background/60" : "text-foreground/60", cardVariantClassName)}>
-              {product.variant}
-            </p>
+            {/* Product Info */}
+            <div className="p-4">
+              {product.category && (
+                <p className="text-xs font-medium text-primary-cta mb-2">
+                  {product.category}
+                </p>
+              )}
+              <h3 className="font-semibold mb-2 line-clamp-2">{product.name}</h3>
+              {product.rating !== undefined && (
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm">★ {product.rating}</span>
+                  {product.reviewCount && (
+                    <span className="text-xs text-foreground/60">
+                      ({product.reviewCount})
+                    </span>
+                  )}
+                </div>
+              )}
+              <p className="font-bold text-lg">{product.price}</p>
+            </div>
           </div>
-          <p className={cls("text-base font-medium leading-[1.3] flex-shrink-0", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
-            {product.price}
-          </p>
-        </div>
+        ))}
       </div>
-    </article>
+    </div>
   );
 });
 
-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardFour = ({
-  products: productsProp,
-  carouselMode = "buttons",
-  gridVariant,
-  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Product section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  imageClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardNameClassName = "",
-  cardPriceClassName = "",
-  cardVariantClassName = "",
-  actionButtonClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: ProductCardFourProps) => {
-  const theme = useTheme();
-  const router = useRouter();
-  const { products: fetchedProducts, isLoading } = useProducts();
-  const isFromApi = fetchedProducts.length > 0;
-  const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-  const handleProductClick = useCallback((product: ProductCard) => {
-    if (isFromApi) {
-      router.push(`/shop/${product.id}`);
-    } else {
-      product.onProductClick?.();
-    }
-  }, [isFromApi, router]);
-
-
-  if (isLoading && !productsProp) {
-    return (
-      <div className="w-content-width mx-auto py-20 text-center">
-        <p className="text-foreground">Loading products...</p>
-      </div>
-    );
-  }
-
-  if (!products || products.length === 0) {
-    return null;
-  }
-
-  return (
-    <CardStack
-      mode={carouselMode}
-      gridVariant={gridVariant}
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-      animationType={animationType}
-
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      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}
-      ariaLabel={ariaLabel}
-    >
-      {products?.map((product, index) => (
-        <ProductCardItem
-          key={`${product.id}-${index}`}
-          product={{ ...product, onProductClick: () => handleProductClick(product) }}
-          shouldUseLightText={shouldUseLightText}
-          cardClassName={cardClassName}
-          imageClassName={imageClassName}
-          cardNameClassName={cardNameClassName}
-          cardPriceClassName={cardPriceClassName}
-          cardVariantClassName={cardVariantClassName}
-          actionButtonClassName={actionButtonClassName}
-        />
-      ))}
-    </CardStack>
-  );
-};
-
 ProductCardFour.displayName = "ProductCardFour";
 
 export default ProductCardFour;