import React from 'react';
import PropTypes from 'prop-types';

import Product from './components/Product';
import Source from './components/Source';


const GridList = ({ metrics, type, forReport }) => {
  const gridLines = metrics.map((item, index) => (
    <React.Fragment>
      {type === 'source' && <Source item={item} key={`source_item_${item.value}_${item.label}`} number={index + 1} forReport={forReport}/>}
      {type === 'product' && <Product item={item} key={`product_item_${item.value}_${item.label}`} number={index + 1} forReport={forReport}/>}
    </React.Fragment>
  ));

  return <div style={{ width: '100%' }}>{gridLines}</div>;
};

GridList.defaultProps = {
  metrics: [],
  type: 'source',
  forReport: false
};

GridList.propTypes = {
  metrics: PropTypes.arrayOf,
  type: PropTypes.string,
  forReport: PropTypes.bool
};

export default GridList;