first commit

app/[locale]/cart/ui/CartItemCard.tsx

@@ -0,0 +1,105 @@
+"use client"
+import Image from "next/image"
+import { Minus, Plus, Trash2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { useUpdateCartItemQuantity, useRemoveFromCart } from "@/lib/hooks"
+import type { CartItem, CartTranslations } from "./types"
+
+interface CartItemCardProps {
+  item: CartItem
+  translations: CartTranslations
+}
+
+export default function CartItemCard({ item, translations: t }: CartItemCardProps) {
+  const { mutate: updateQuantity, isPending: isUpdating } = useUpdateCartItemQuantity()
+  const { mutate: removeItem, isPending: isRemoving } = useRemoveFromCart()
+
+  const handleQuantityChange = (delta: number) => {
+    const newQuantity = item.quantity + delta
+    if (newQuantity >= 1) {
+      updateQuantity({ itemId: item.id, quantity: newQuantity })
+    }
+  }
+
+  const handleDelete = () => {
+    removeItem(item.id)
+  }
+
+  return (
+    <Card className="p-4 shadow-none border">
+      <div className="flex flex-col sm:flex-row gap-4">
+        {/* Product Image & Info */}
+        <div className="flex gap-4 flex-1">
+          <div className="relative w-[88px] h-[117px] rounded-xl border overflow-hidden flex-shrink-0">
+            <Image
+              src={item.product.image || item.product.images[0] || "/placeholder.svg"}
+              alt={item.product.name}
+              fill
+              className="object-contain"
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <h3 className="font-semibold text-base">{item.product.name}</h3>
+            <p className="text-sm text-gray-600">{item.seller.name}</p>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDelete}
+              disabled={isRemoving}
+              className="w-fit p-0 h-auto hover:bg-transparent hover:text-red-500"
+            >
+              <Trash2 className="h-5 w-5" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Price & Quantity */}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-semibold">
+              {t.pricePerUnit} <span className="text-primary">{item.price_formatted || `${item.price} TMT`}</span>
+            </p>
+            <p className="text-sm font-semibold">
+              {t.additionalPrice} {item.sub_total_formatted || `${item.total} TMT`}
+            </p>
+            {item.discount_formatted && item.discount_formatted !== "0 TMT" && (
+              <p className="text-sm font-semibold">
+                {t.discount} {item.discount_formatted}
+              </p>
+            )}
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold">{t.totalPrice}</span>
+              <span className="bg-green-500 text-white px-3 py-1 rounded-xl font-semibold text-base">
+                {item.total_formatted || `${item.total} TMT`}
+              </span>
+            </div>
+          </div>
+
+          {/* Quantity Controls */}
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => handleQuantityChange(-1)}
+              disabled={item.quantity === 1 || isUpdating}
+              className="rounded-xl bg-blue-50"
+            >
+              <Minus className="h-4 w-4" />
+            </Button>
+            <div className="w-12 text-center font-semibold">{item.quantity}</div>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => handleQuantityChange(1)}
+              disabled={isUpdating}
+              className="rounded-xl bg-blue-50"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}