Add src/components/cart/CartItem.tsx

src/components/cart/CartItem.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { Minus, Plus, Trash2 } from 'lucide-react';
+
+interface CartItemProps {
+  item: { id: string; name: string; price: number; quantity: number; imageSrc: string; imageAlt?: string };
+  onUpdateQuantity: (productId: string, newQuantity: number) => void;
+  onRemove: (productId: string) => void;
+}
+
+export const CartItem = ({ item, onUpdateQuantity, onRemove }: CartItemProps) => {
+  return (
+    <div className="flex items-center justify-between p-4 border-b last:border-b-0">
+      <div className="flex items-center space-x-4">
+        <div className="relative w-20 h-20 rounded-md overflow-hidden flex-shrink-0">
+          <Image src={item.imageSrc} alt={item.imageAlt || item.name} layout="fill" objectFit="cover" />
+        </div>
+        <div>
+          <h3 className="font-semibold text-lg text-foreground">{item.name}</h3>
+          <p className="text-sm text-accent">${item.price.toFixed(2)}</p>
+        </div>
+      </div>
+      <div className="flex items-center space-x-4">
+        <div className="flex items-center space-x-2">
+          <button
+            onClick={() => onUpdateQuantity(item.id, item.quantity - 1)}
+            className="p-1 rounded-full bg-secondary-cta hover:bg-primary-cta transition-colors text-foreground"
+            aria-label="Decrease quantity"
+          >
+            <Minus size={16} />
+          </button>
+          <span className="font-medium text-foreground w-6 text-center">{item.quantity}</span>
+          <button
+            onClick={() => onUpdateQuantity(item.id, item.quantity + 1)}
+            className="p-1 rounded-full bg-secondary-cta hover:bg-primary-cta transition-colors text-foreground"
+            aria-label="Increase quantity"
+          >
+            <Plus size={16} />
+          </button>
+        </div>
+        <button
+          onClick={() => onRemove(item.id)}
+          className="text-red-500 hover:text-red-700 transition-colors p-1 rounded-full bg-card"
+          aria-label="Remove item"
+        >
+          <Trash2 size={20} />
+        </button>
+      </div>
+    </div>
+  );
+};