import React from 'react';
import { Figures, InfoBox } from 'app/shared/components/infoBox/infoBox';
import cx from 'classnames';


interface Props {
  boxes: Figures[][];
  extraClass?: string;
}

const InfoBoxGroup = ({ boxes, extraClass }: Props) => {
  const classes = cx('o-layout__item-12 o-layout__item-xl-3  o-layout--wrap', extraClass);
  return (
    <div className="o-layout o-layout--wrap ">
      {boxes && boxes.map(((item, index) => {
        return (
          <div key={index} className={classes}>
            <div className={cx('o-gutter-top--small o-gutter-bottom--small o-gutter-xl--small',
              { 'o-gutter-xl-left--none ': (index === 0) },
              { 'o-gutter-xl-right--none': (index === boxes.length-1) })}>
              <InfoBox boxes={item} />
            </div>
          </div>
        );
      }))
      }
    </div>
  );
};

export { InfoBoxGroup };