import React from 'react'
import classNames from 'classnames/bind'

const cx = classNames.bind(require('../styles/progress_indicator.scss'))

const ProgressIndicator = ({completed, total, text: template = "", small, className}) => {
  let percentage = completed / total * 100
  let text = template.replace("##", Math.ceil(percentage))
  return (
    <div className={cx('progress-indicator', {'progress-indicator_small': small}, className)}>
      <div className={cx('progress-indicator__bar')}>
        {text}
        <div className={cx('progress-indicator__bar-filler')} style={{width: `${percentage}%`}}>
          {text}
        </div>
      </div>
    </div>
  )
}

export default ProgressIndicator