import React from 'react';

// utils
import { OrderProductsListProps } from '../utils/types';
import { groupLines } from '../utils/helperFunctions';

// components
import OrderProduct from '../OrderProduct';

// styles
import { OrderProductsListWrapper } from './style';

const OrderProductsList = (props: OrderProductsListProps): JSX.Element => {
  const { lines, orderId, currency, isZoomIN, kdsDeviceConfigs } = props;

  return (
    <OrderProductsListWrapper isZoomIn={isZoomIN}>
      {groupLines(lines).map((line) => (
        <OrderProduct
          key={line.id}
          line={line}
          orderId={orderId}
          currency={currency}
          kdsDeviceConfigs={kdsDeviceConfigs}
        />
      ))}
    </OrderProductsListWrapper>
  );
};

export default OrderProductsList;