added some api

components/ProductCard.tsx

@@ -1,13 +1,15 @@
 "use client";
 
 import { useState, MouseEvent } from "react";
-
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Heart, HeartOff, Minus, Plus } from "lucide-react";
+import { Heart, Minus, Plus } from "lucide-react";
 import Image, { StaticImageData } from "next/image";
+import { useAddToFavorites, useRemoveFromFavorites } from "@/lib/hooks";
+import { useToast } from "@/hooks/use-toast";
+
 type ProductCardProps = {
   id: number;
   name: string;
@@ -43,10 +45,52 @@ export default function ProductCard({
   const [cart, setCart] = useState(false);
   const [count, setCount] = useState(1);
 
+  const { toast } = useToast();
+  const { mutate: addToFavorites, isPending: isAdding } = useAddToFavorites();
+  const { mutate: removeFromFavorites, isPending: isRemoving } =
+    useRemoveFromFavorites();
+
   const handleFavorite = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setFavorite((prev) => !prev);
+
+    const newFavoriteState = !favorite;
+
+    if (newFavoriteState) {
+      // Добавляем в избранное
+      addToFavorites(id, {
+        onSuccess: () => {
+          setFavorite(true);
+          toast({
+            title: "Товар добавлен в избранное",
+          });
+        },
+        onError: (error) => {
+          toast({
+            title: "Ошибка",
+            description: error.message,
+            variant: "destructive",
+          });
+        },
+      });
+    } else {
+      // Удаляем из избранного
+      removeFromFavorites(id, {
+        onSuccess: () => {
+          setFavorite(false);
+          toast({
+            title: "Товар удален из избранного",
+          });
+        },
+        onError: (error) => {
+          toast({
+            title: "Ошибка",
+            description: error.message,
+            variant: "destructive",
+          });
+        },
+      });
+    }
   };
 
   const handleAddToCart = (e: MouseEvent<HTMLButtonElement>) => {
@@ -67,21 +111,23 @@ export default function ProductCard({
     setCount((c) => (c > 1 ? c - 1 : c));
   };
 
+  const isPending = isAdding || isRemoving;
+
   return (
     <Link href={`/product/${id}`} className="no-underline">
       <Card
-        className={`relative gap-2 border-none shadow-none! p-0 w-full max-w-[${width}px] overflow-hidden rounded-2xl  hover:shadow-md transition-all cursor-pointer`}
+        className={`relative gap-2 border-none shadow-none! p-0 w-full max-w-[${width}px] overflow-hidden rounded-2xl hover:shadow-md transition-all cursor-pointer`}
         style={{ height }}
       >
         {/* Image Section */}
-        <div className="relative w-full h-[260px] ">
+        <div className="relative w-full h-[260px]">
           {images?.[0] && (
             <Image
               src={images[0]}
               alt={name}
               fill
               sizes="(max-width: 600px) 100vw, 33vw"
-              className="object-contain "
+              className="object-contain"
               priority
             />
           )}
@@ -89,7 +135,8 @@ export default function ProductCard({
           {/* Favorite Button */}
           <button
             onClick={handleFavorite}
-            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white"
+            disabled={isPending}
+            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {favorite ? (
               <Heart className="w-5 h-5 text-red-500 fill-red-500" />
@@ -125,7 +172,7 @@ export default function ProductCard({
           <p className="text-gray-800 text-sm truncate mx-2">{name}</p>
         </CardContent>
 
-        {/* Buttons */}
+        {/* Buttons - закомментированы в оригинале */}
         {/* {button && (
           <div className="p-3">
             {!cart ? (

components/home/CategoryGrid.tsx

@@ -47,7 +47,13 @@ export default function CategoryGrid({ categories, isLoading, isError, locale, t
           <Link key={cat.id} href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}>
             <Card className="hover:shadow-md border-none shadow-none p-0 gap-2 transition-all cursor-pointer">
               <div className="relative w-full h-36 overflow-hidden rounded-lg">
-                <Image src={cat.image || "/placeholder.svg"} alt={cat.name} fill className="object-contain" />
+               <Image
+  src={cat.media?.[0]?.images_400x400 || "/placeholder.svg"}
+  alt={cat.name}
+  fill
+  className="object-contain"
+/>
+
               </div>
               <CardContent className="py-2">
                 <p className="text-sm font-medium text-gray-800 truncate text-center">{cat.name}</p>