import { useCartStore } from '../../stores/cart';
import { Minus, Plus, Trash2 } from 'lucide-react';

export default function CartItems() {
  const { items, updateQuantity, removeItem } = useCartStore();

  return (
    <div className="space-y-4">
      {items.map((item) => (
        <div key={item.id} className="flex gap-4 py-4 border-b">
          <img
            src={item.image}
            alt={item.name}
            className="w-20 h-20 object-cover rounded"
          />
          <div className="flex-1">
            <h4 className="font-medium">{item.name}</h4>
            {item.variant && (
              <p className="text-sm text-gray-500">{item.variant.name}</p>
            )}
            <p className="font-bold mt-1">฿{item.price.toLocaleString()}</p>
          </div>
          <div className="flex flex-col items-end justify-between">
            <button
              onClick={() => removeItem(item.id)}
              className="text-red-500 hover:text-red-700"
            >
              <Trash2 className="w-4 h-4" />
            </button>
            <div className="flex items-center gap-2">
              <button
                onClick={() => updateQuantity(item.id, item.quantity - 1)}
                className="w-8 h-8 border rounded flex items-center justify-center"
              >
                <Minus className="w-4 h-4" />
              </button>
              <span className="w-8 text-center">{item.quantity}</span>
              <button
                onClick={() => updateQuantity(item.id, item.quantity + 1)}
                className="w-8 h-8 border rounded flex items-center justify-center"
              >
                <Plus className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}
