import { forwardRef } from 'react';
import BoxesPrint from './BoxesPrint';

interface BoxesPrintListProps {
    boxData: any;
}

const chunkArray = (arr: any[], chunkSize: number): any[][] => {
    const result = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
        result.push(arr.slice(i, i + chunkSize));
    }
    return result;
};

const BoxesPrintList = forwardRef<HTMLDivElement, BoxesPrintListProps>(({ boxData }, ref) => {
    const productsChunks = chunkArray(boxData.products_list || [], 36);

    return (
        <div ref={ref}>
            {productsChunks.map((chunk, index) => (
                <div key={index} style={{ pageBreakAfter: 'always' }}>
                    <BoxesPrint boxData={{ ...boxData, products_list: chunk }} key={index} />
                </div>
            ))}
        </div>
    );
});

BoxesPrintList.displayName = 'BoxesPrintList';

export default BoxesPrintList;