тут нихуя не работает, ебаный рот этого казино

frontend/style/components/product-card.tsx

@@ -1,24 +1,54 @@
+"use client"
+
 import Image from "next/image"
-import { Heart } from 'lucide-react'
+import Link from "next/link"
+import { Heart, ShoppingCart } from 'lucide-react'
 import { Button } from "./ui/button"
-import { Badge } from "./ui/badge"
+import { useCart } from "@/contexts/cart-context"
+import { useFavorites } from "@/contexts/favorites-context"
 
 interface ProductCardProps {
   product: {
     id: number
     title: string
     price: number
-    oldPrice: number
-    discount: number
     image: string
-    isHotDeal?: boolean
-    isSale?: boolean
   }
 }
 
 export function ProductCard({ product }: ProductCardProps) {
+  const { addToCart, removeFromCart } = useCart()
+  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
+
+  const handleAddToCart = (e: React.MouseEvent) => {
+    e.preventDefault()
+    addToCart({
+      id: product.id,
+      title: product.title,
+      price: product.price,
+    })
+  }
+
+  const handleRemoveFromCart = (e: React.MouseEvent) => {
+    e.preventDefault()
+    removeFromCart(product.id)
+  }
+
+  const handleToggleFavorite = (e: React.MouseEvent) => {
+    e.preventDefault()
+    if (isFavorite(product.id)) {
+      removeFromFavorites(product.id)
+    } else {
+      addToFavorites({
+        id: product.id,
+        title: product.title,
+        price: product.price,
+      })
+    }
+  }
+
   return (
-    <div className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg">
+    <Link href={`/product/${product.id}`} className="group relative bg-white rounded-lg p-2 transition-shadow hover:shadow-lg block">
       <div className="relative aspect-square mb-2">
         <Image
           src={product.image}
@@ -30,31 +60,24 @@ export function ProductCard({ product }: ProductCardProps) {
           variant="ghost"
           size="icon"
           className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={handleToggleFavorite}
         >
-          <Heart className="h-5 w-5" />
+          <Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
         </Button>
-        {product.isHotDeal && (
-          <div className="absolute top-2 left-2 bg-pink-500 text-white px-2 py-1 text-xs font-medium rounded">
-            НАРАСХВАТ
-          </div>
-        )}
       </div>
       <div className="space-y-2">
-        <div className="flex items-baseline gap-2">
-          <span className="text-xl font-bold">{product.price} ₽</span>
-          <span className="text-sm text-muted-foreground line-through">
-            {product.oldPrice} ₽
-          </span>
-          <span className="text-sm text-red-500">-{product.discount}%</span>
-        </div>
+        <span className="text-xl font-bold">{product.price} ₽</span>
         <h3 className="text-sm line-clamp-2">{product.title}</h3>
-        {product.isSale && (
-          <Badge variant="destructive" className="mt-2">
-            Распродажа
-          </Badge>
-        )}
+        <div className="flex gap-2">
+          <Button onClick={handleAddToCart} className="flex-1">
+            <ShoppingCart className="mr-2 h-4 w-4" /> В корзину
+          </Button>
+          <Button onClick={handleRemoveFromCart} variant="outline" size="icon">
+            -
+          </Button>
+        </div>
       </div>
-    </div>
+    </Link>
   )
 }