// Example integration of CartItem component in Sales.tsx
// Replace the existing PosItem usage with CartItem for the new design

import CartItem from '@/components/POS/CartItem';

// In the Sales component, replace this:
{saleItems
.filter(item => item.quantity > 0 && item.product.name)
.map((item, index) => (
<PosItem
key={item.product.id}
item={{
        product_id: item.product.id,
        category_id: item.product.category_id,
        name: item.product.name,
        qty: item.quantity,
        price: item.price,
        total: item.total,
        discount: item.discount || 0,
        discount_type: item.discountType || 'value',
        is_free: false,
        allocated_discount: 0,
        promotion_name: null
      }}
onQuantityChange={(newQuantity) => updateQuantity(index, newQuantity)}
onRemove={() => removeFromSale(index)}
showControls={true}
/>
))}

// With this:
{saleItems
.filter(item => item.quantity > 0 && item.product.name)
.map((item, index) => (
<CartItem
key={item.product.id}
item={{
        product_id: item.product.id,
        category_id: item.product.category_id,
        name: item.product.name,
        qty: item.quantity,
        price: item.price,
        total: item.total,
        discount: item.discount || 0,
        discount_type: item.discountType || 'value',
        is_free: false,
        allocated_discount: 0,
        promotion_name: null
      }}
onQuantityChange={(newQuantity) => updateQuantity(index, newQuantity)}
onRemove={() => removeFromSale(index)}
showControls={true}
context="sale"
/>
))}

// The CartItem component maintains the same props interface as PosItem,
// making it a drop-in replacement with the new modern design.