Contect with order api

app/[locale]/favorites/page.tsx

@@ -1,76 +1,17 @@
 "use client";
-import {
-  useFavorites,
-  useAddToCart,
-  useRemoveFromFavorites,
-} from "@/lib/hooks";
-import { useState, useCallback, useMemo } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { Heart, ShoppingCart } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
+
+import { useFavorites } from "@/lib/hooks";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useToast } from "@/hooks/use-toast";
 import { useTranslations } from "next-intl";
+import ProductCard from "@/features/home/components/ProductCard";
 import type { Favorite } from "@/lib/types/api";
 
 export default function FavoritesPage() {
-  const [isHovered, setIsHovered] = useState<number | null>(null);
-  const { toast } = useToast();
   const t = useTranslations();
-
   const { data: favorites, isLoading, isError } = useFavorites();
-  const { mutate: removeFromFavorites, isPending: isRemoving } =
-    useRemoveFromFavorites();
-  const { mutate: addToCart, isPending: isAddingToCart } = useAddToCart();
 
-  const handleRemoveFromFavorites = useCallback(
-    (productId: number) => {
-      removeFromFavorites(productId, {
-        onSuccess: () => {
-          toast({
-            title: t("removed_from_favorites"),
-          });
-        },
-        onError: (error) => {
-          toast({
-            title: t("error"),
-            description: error.message,
-            variant: "destructive",
-          });
-        },
-      });
-    },
-    [removeFromFavorites, toast, t]
-  );
-
-  const handleAddToCart = useCallback(
-    (productId: number) => {
-      addToCart(
-        { productId },
-        {
-          onSuccess: () => {
-            toast({
-              title: t("added_to_cart"),
-            });
-          },
-          onError: (error) => {
-            toast({
-              title: t("error"),
-              description: error.message,
-              variant: "destructive",
-            });
-          },
-        }
-      );
-    },
-    [addToCart, toast, t]
-  );
-
-  const loadingSkeleton = useMemo(
-    () => (
+  if (isLoading) {
+    return (
       <div className="container mx-auto px-4 py-8 min-h-screen">
         <h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
         <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
@@ -79,17 +20,12 @@ export default function FavoritesPage() {
           ))}
         </div>
       </div>
-    ),
-    [t]
-  );
-
-  if (isLoading) {
-    return loadingSkeleton;
+    );
   }
 
   if (isError || !favorites || favorites.length === 0) {
     return (
-      <div className="container mx-auto px-4 py-8 min-h-screen">
+      <div className="container mx-auto px-6 py-8  bg-white">
         <h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
         <div className="flex items-center justify-center min-h-[60vh]">
           <p className="text-2xl text-gray-400">{t("empty_favorites")}</p>
@@ -99,145 +35,48 @@ export default function FavoritesPage() {
   }
 
   return (
-    <div className="container mx-auto px-4 py-8 min-h-screen">
-      <h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-        {favorites.map((favorite: Favorite) => (
-          <ProductCard
-            key={favorite.product.id}
-            productId={favorite.product.id}
-            product={favorite.product}
-            onRemove={() => handleRemoveFromFavorites(favorite.product.id)}
-            onAddToCart={() => handleAddToCart(favorite.product.id)}
-            onHover={setIsHovered}
-            isHovered={isHovered === favorite.product.id}
-            isRemoving={isRemoving}
-            isAddingToCart={isAddingToCart}
-          />
-        ))}
+    <div className="container mx-auto px-6   
+     md:px-4 lg:px-6  pb-12 space-y-8 max-w-[1504px] 
+    ">
+      <h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">{t("favorite_products")}</h1>
+      <div className="bg-white grid grid-cols-2 sm:grid-cols-3 rounded-lg md:grid-cols-4 lg:grid-cols-5 gap-3 p-4">
+        {favorites.map((favorite: Favorite) => {
+          const product = favorite.product;
+
+          const allImages = product.media
+            ?.map(
+              (media) =>
+                media.images_800x800 ||
+                media.images_720x720 ||
+                media.images_400x400 ||
+                media.thumbnail
+            )
+            .filter(Boolean) || ["/placeholder-product.jpg"];
+
+          const formattedPrice = product.price_amount
+            ? `${parseFloat(product.price_amount).toFixed(2)} TMT`
+            : "Price not available";
+
+          return (
+            <ProductCard
+              key={product.id}
+              id={product.id}
+              name={product.name}
+              price={
+                product.price_amount ? parseFloat(product.price_amount) : null
+              }
+              struct_price_text={formattedPrice}
+              images={allImages}
+              labels={[]}
+              price_color="#0059ff"
+              height={360}
+              width={250}
+              button={true}
+              stock={product.stock}
+            />
+          );
+        })}
       </div>
     </div>
   );
 }
-
-interface Product {
-  id: number;
-  name: string;
-  slug: string;
-  price_amount: string;
-  old_price_amount?: string | null;
-  media: Array<{
-    thumbnail: string;
-    images_400x400: string;
-    images_720x720: string;
-    images_800x800: string;
-    images_1200x1200: string;
-  }>;
-  stock: number;
-}
-
-interface ProductCardProps {
-  productId: number;
-  product: Product;
-  onRemove: () => void;
-  onAddToCart: () => void;
-  onHover: (id: number | null) => void;
-  isHovered: boolean;
-  isRemoving: boolean;
-  isAddingToCart: boolean;
-}
-
-function ProductCard({
-  productId,
-  product,
-  onRemove,
-  onAddToCart,
-  onHover,
-  isHovered,
-  isRemoving,
-  isAddingToCart,
-}: ProductCardProps) {
-  const t = useTranslations();
-
-  if (!product) return null;
-
-  const imageUrl =
-    product.media?.[0]?.images_800x800 ||
-    product.media?.[0]?.thumbnail ||
-    "/placeholder.svg";
-
-  const price = `${parseFloat(product.price_amount).toFixed(2)} TMT`;
-  const oldPrice = product.old_price_amount
-    ? `${parseFloat(product.old_price_amount).toFixed(2)} TMT`
-    : null;
-
-  return (
-    <Card
-      className="group overflow-hidden rounded-xl transition-shadow hover:shadow-lg relative border-none"
-      onMouseEnter={() => onHover(productId)}
-      onMouseLeave={() => onHover(null)}
-    >
-      <Link href={`/product/${productId || product.slug}`} className="block">
-        <div className="relative aspect-square bg-gray-50">
-          <button
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onRemove();
-            }}
-            disabled={isRemoving}
-            className="absolute top-2 right-2 z-10 bg-white rounded-full p-2 shadow-md hover:scale-110 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <Heart className="h-5 w-5 fill-red-500 text-red-500" />
-          </button>
-
-          <Image
-            src={imageUrl}
-            alt={product.name}
-            fill
-            sizes="(max-width: 640px) 50vw, (max-width: 768px) 33vw, (max-width: 1024px) 25vw, 20vw"
-            className="object-contain p-4 group-hover:scale-105 transition-transform"
-            priority={false}
-          />
-
-          {product.stock === 0 && (
-            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
-              <Badge variant="secondary" className="text-sm">
-                {t("out_of_stock")}
-              </Badge>
-            </div>
-          )}
-        </div>
-
-        <div className="p-3">
-          <h3 className="font-medium text-sm line-clamp-2 mb-2 min-h-[40px]">
-            {product.name}
-          </h3>
-          <div className="space-y-1">
-            {oldPrice && (
-              <p className="text-sm text-gray-400 line-through">{oldPrice}</p>
-            )}
-            <p className="text-lg font-bold text-blue-600">{price}</p>
-          </div>
-        </div>
-      </Link>
-
-      {isHovered && product.stock > 0 && (
-        <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-white via-white to-transparent">
-          <Button
-            onClick={(e) => {
-              e.preventDefault();
-              onAddToCart();
-            }}
-            disabled={isAddingToCart}
-            className="w-full rounded-xl gap-2"
-            size="sm"
-          >
-            <ShoppingCart className="h-4 w-4" />
-            {t("add_to_cart")}
-          </Button>
-        </div>
-      )}
-    </Card>
-  );
-}