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

frontend/style/components/cart-items.tsx

@@ -5,25 +5,12 @@ import { Checkbox } from "./ui/checkbox"
 import { Button } from "./ui/button"
 import { Minus, Plus, Heart, Trash } from 'lucide-react'
 import Image from "next/image"
-
-const SAMPLE_ITEMS = [
-  {
-    id: 1,
-    name: "Бумага офисная SvetoCopy, 500 листов, А4",
-    price: 352,
-    oldPrice: 399,
-    image: "/placeholder.svg",
-  },
-  {
-    id: 2,
-    name: "Глюкометр Диаконт Концепт + тест-полоски",
-    price: 1450,
-    oldPrice: 1599,
-    image: "/placeholder.svg",
-  }
-]
+import { useCart } from "@/contexts/cart-context"
+import { useFavorites } from "@/contexts/favorites-context"
 
 export function CartItems() {
+  const { items, removeFromCart, addToCart, removeAllFromCart, updateQuantity } = useCart()
+  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
   const [selectedItems, setSelectedItems] = useState<number[]>([])
 
   const toggleItem = (id: number) => {
@@ -34,13 +21,25 @@ export function CartItems() {
     )
   }
 
+  const handleToggleFavorite = (item: typeof items[0]) => {
+    if (isFavorite(item.id)) {
+      removeFromFavorites(item.id)
+    } else {
+      addToFavorites(item)
+    }
+  }
+
+  const handleUpdateQuantity = (id: number, newQuantity: number) => {
+    updateQuantity(id, newQuantity)
+  }
+
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2 mb-4">
         <Checkbox 
-          checked={selectedItems.length === SAMPLE_ITEMS.length}
+          checked={selectedItems.length === items.length}
           onCheckedChange={(checked) => {
-            setSelectedItems(checked ? SAMPLE_ITEMS.map(item => item.id) : [])
+            setSelectedItems(checked ? items.map(item => item.id) : [])
           }}
         />
         <span>Выбрать все</span>
@@ -50,43 +49,43 @@ export function CartItems() {
           </button>
         )}
       </div>
-      {SAMPLE_ITEMS.map((item) => (
+      {items.map((item) => (
         <div key={item.id} className="flex gap-4 p-4 bg-white rounded-lg">
           <Checkbox 
             checked={selectedItems.includes(item.id)}
             onCheckedChange={() => toggleItem(item.id)}
           />
           <Image
-            src={item.image}
-            alt={item.name}
+            src={item.image || "/placeholder.svg"}
+            alt={item.title}
             width={100}
             height={100}
             className="object-cover"
           />
           <div className="flex-1">
-            <h3 className="font-medium">{item.name}</h3>
+            <h3 className="font-medium">{item.title}</h3>
             <div className="flex gap-4 mt-4">
               <div className="flex items-center gap-2">
-                <Button variant="outline" size="icon">
+                <Button variant="outline" size="icon" onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}>
                   <Minus className="h-4 w-4" />
                 </Button>
-                <span className="w-8 text-center">1</span>
-                <Button variant="outline" size="icon">
+                <span className="w-8 text-center">{item.quantity}</span>
+                <Button variant="outline" size="icon" onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}>
                   <Plus className="h-4 w-4" />
                 </Button>
               </div>
-              <Button variant="ghost" size="icon">
-                <Heart className="h-4 w-4" />
+              <Button variant="ghost" size="icon" onClick={() => handleToggleFavorite(item)}>
+                <Heart className={`h-4 w-4 ${isFavorite(item.id) ? 'fill-red-500 text-red-500' : ''}`} />
               </Button>
-              <Button variant="ghost" size="icon">
+              <Button variant="ghost" size="icon" onClick={() => removeAllFromCart(item.id)}>
                 <Trash className="h-4 w-4" />
               </Button>
             </div>
           </div>
           <div className="text-right">
-            <div className="text-lg font-bold">{item.price} ₽</div>
-            <div className="text-sm text-muted-foreground line-through">
-              {item.oldPrice} ₽
+            <div className="text-lg font-bold">{item.price * item.quantity} ₽</div>
+            <div className="text-sm text-muted-foreground">
+              {item.price} ₽ за шт.
             </div>
           </div>
         </div>