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

frontend/style/components/product-detail.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import Image from "next/image"
+import { useState } from "react"
+import { Heart, ShoppingCart, Minus, Plus } from 'lucide-react'
+import { Button } from "./ui/button"
+import { useCart } from "@/contexts/cart-context"
+import { useFavorites } from "@/contexts/favorites-context"
+import { Product } from "@/types/product"
+
+interface ProductDetailProps {
+  product: Product
+}
+
+export function ProductDetail({ product }: ProductDetailProps) {
+  const [quantity, setQuantity] = useState(1)
+  const { addToCart } = useCart()
+  const { addToFavorites, removeFromFavorites, isFavorite } = useFavorites()
+
+  const handleAddToCart = () => {
+    addToCart({
+      id: product.id,
+      title: product.title,
+      price: product.price,
+      quantity: quantity
+    })
+  }
+
+  const handleToggleFavorite = () => {
+    if (isFavorite(product.id)) {
+      removeFromFavorites(product.id)
+    } else {
+      addToFavorites({
+        id: product.id,
+        title: product.title,
+        price: product.price,
+      })
+    }
+  }
+
+  return (
+    <div className="flex flex-col md:flex-row gap-8">
+      <div className="md:w-1/2">
+        <Image
+          src={product.image}
+          alt={product.title}
+          width={500}
+          height={500}
+          className="w-full h-auto object-cover rounded-lg"
+        />
+      </div>
+      <div className="md:w-1/2 space-y-4">
+        <h1 className="text-3xl font-bold">{product.title}</h1>
+        {product.title.startsWith('[Draft]') && (
+          <div className="bg-yellow-200 text-yellow-800 px-2 py-1 rounded inline-block">
+            Draft Version
+          </div>
+        )}
+        <div className="flex items-baseline gap-2">
+          <span className="text-2xl font-bold">{product.price} ₽</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => setQuantity(prev => Math.max(1, prev - 1))}
+            >
+              <Minus className="h-4 w-4" />
+            </Button>
+            <span className="w-8 text-center">{quantity}</span>
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => setQuantity(prev => prev + 1)}
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+          <Button onClick={handleAddToCart} className="flex-1">
+            <ShoppingCart className="mr-2 h-4 w-4" /> Добавить в корзину
+          </Button>
+          <Button variant="outline" size="icon" onClick={handleToggleFavorite}>
+            <Heart className={`h-5 w-5 ${isFavorite(product.id) ? 'fill-red-500 text-red-500' : ''}`} />
+          </Button>
+        </div>
+        <div className="border-t pt-4">
+          <h2 className="text-xl font-semibold mb-2">Описание</h2>
+          <p className="text-gray-600">
+            Подробное описание товара. Здесь может быть длинный текст с характеристиками и особенностями продукта.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+