'use client';

import { useTranslation } from '@/lib/hooks/useTranslation';
import { CartItem } from 'lib/shopify/types';
import { CartBoxItem } from '../CartBoxItem';

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

export function BoxesSection({ boxes, onUpdate, isPending }: BoxesSectionProps) {
  const { t } = useTranslation();
  
  if (boxes.length === 0) return null;
  
  return (
    <div className="mb-6">
      <h2 className="text-lg font-medium mb-4">{t('cart.boxes')}</h2>
      <div className="space-y-4">
        {boxes.map((boxGroup) => (
          <CartBoxItem
            key={boxGroup.box.id}
            boxItem={boxGroup.box}
            boxProducts={boxGroup.products}
            onUpdate={onUpdate}
            isPending={isPending}
          />
        ))}
      </div>
    </div>
  );
}