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

import styles from './info-grid.module.scss';
import keygen from '~helpers/keygen';

const InfoGrid = ({ data }) => (
  <div className={styles.infoGridContainer || ''}>
    {data.map((row) => (
      <div key={keygen()} className={styles.infoGridItem || ''}>
        <div className={styles.infoGridItemTitle || ''}>{row.name}</div>
        <div className={styles.infoGridItemValue || ''}>{row.value}</div>
      </div>
    ))}
  </div>
);
InfoGrid.propTypes = {
  data: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, value: PropTypes.string }))
    .isRequired,
};
export default InfoGrid;
