import React from 'react';
import classnames from 'classnames';

export default class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
  }
  // HTML5 <progress> supports up to IE10, but this works too!
  render() {
    const { max, value, classes } = this.props;
    const progressPercent = value / max * 100 + '%';
    const valueStyle = {width: progressPercent};
    const progressClass = classnames('progress', this.props.classes);
    return (
      <div className={progressClass}>
        <div className="progress__bar">
          <div className="progress__value" style={valueStyle}></div>
        </div>
      </div>
    );
  }

}

ProgressBar.propTypes = {
  max: React.PropTypes.number,
  value: React.PropTypes.number,
  classes: React.PropTypes.string
};