text: import React from 'react'
  import classnames from 'classnames'
  
  function formatProgress(dec) {
    return (dec * 100).toPrecision(3) + "%"
  }
  
  export default class ProgressBar extends React.Component {
  
    render() {
      const failed = this.props.value < 0;
      const inProgress = this.props.value < 1 && this.props.value >= 0;
      const classes = classnames('progress-bar', {
        'progress-bar-failed': failed,
        'progress-bar-in-progress': inProgress,
        'progress-bar-small': this.props.small
      })
  
      const formatted = formatProgress(this.props.value)
  
      return <div className={classes}>
        {failed
          ? <div className="progress-bar-text">Lỗi</div>
          : inProgress ? <div
            className="progress-bar-inner"
            style={{width: formatted}}>
            <div className="progress-bar-text">
              {formatted}
            </div>
          </div>
          : <div className="progress-bar-text">Tải xong</div>}
        </div>
    }
  }
  
  ProgressBar.propTypes = {
    value: React.PropTypes.number.isRequired,
    small: React.PropTypes.bool
  }
  
  ProgressBar.defaultProps = {
    small: false
  }
  