'use client';

import { useTranslation } from '@/lib/hooks/useTranslation';
import { CartItem } from 'lib/shopify/types';
import { CartProductItem } from '../CartProductItem';
import { getUniqueItemKey } from '../processCartItems';

interface ProductsSectionProps {
  products: CartItem[];
  onUpdate: (merchandiseId: string, updateType: 'plus' | 'minus' | 'delete', itemId?: string) => void;
  isPending: boolean;
}

export function ProductsSection({ products, onUpdate, isPending }: ProductsSectionProps) {
  const { t } = useTranslation();
  
  if (products.length === 0) return null;
  
  return (
    <div className="mb-6">
      <h2 className="text-lg font-medium mb-4">{t('cart.products')}</h2>
      <div className="space-y-6">
        {products.map((item, index) => (
          <CartProductItem
            key={getUniqueItemKey(item, 'standalone', index)}
            item={item}
            onUpdate={onUpdate}
            isPending={isPending}
          />
        ))}
      </div>
    </div>
  );
} 