import React from 'react';
import PropTypes from 'prop-types';
import { GridItem } from '../../index';

import { MetricsContainer } from './styles';

const Metrics = ({ metrics, wide }) => {
  const metricsList = metrics.map(metric => (
    <GridItem
      metric={metric}
      hideDiff
      key={`${metric.label}_${metric.value}_metric`}
      showPercentSign={metric.label === 'Conversions'}
      inline
    />
  ));

  return (
    <MetricsContainer wide={wide} >{metricsList}</MetricsContainer>
  );
};

Metrics.defaultProps = {
  metrics: [],
  wide: false,
};

Metrics.propTypes = {
  metrics: PropTypes.arrayOf,
  wide: PropTypes.boolean,
};

export default Metrics;