Industries

import React, {PropTypes} from 'react';
import styles from './Industries.scss';
import cs from 'classnames';

// Components
import Industry from './Industry';

const Industries = (props) => {
  let theme = styles[props.theme];
  let classes = {
    statement: cs('statement', theme),
    industries: cs(styles.industries, theme)
  };

  return (
    <div className='component'>
      <div className={classes.statement}>
        <h2>What type of retail operation do oyu run</h2>
        <h4>Pick the type of retail store you run. This will influence how your grade is assessed.</h4>
      </div>
      <div className={classes.industries}>
        {props.industries.map(({industryName, imagePath, orderIndex}, i) => {
          return (
            <Industry
              theme={props.theme}
              industryName={industryName}
              imagePath={imagePath}
              orderIndex={orderIndex}
              key={i}/>
          );
        })}
      </div>
    </div>
  );
};

Industries.propTypes = {
  theme: PropTypes.string.isRequired,
  industries: PropTypes.array.isRequired
};

export default Industries;