import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import styles from './progress.scss';

const Progress = ({ value, theme, indicator }) => {
  const cx = classnames.bind(styles);

  const themes = {
    primary: 'progress_inner_bar__primary',
    secondary: 'progress_inner_bar__secondary',
    success: 'progress_inner_bar__success',
    danger: 'progress_inner_bar__danger',
  };

  return (
    <div className={cx('progress')}>
      <div className={cx('progress_inner')}>
        <div
          className={cx('progress_inner_bar', [themes[theme]])}
          style={{ width: `${value}%` }}
        />
      </div>

      {indicator && (
        <span className={cx('progress_indicator')}>{`${value}%`} complete</span>
      )}
    </div>
  );
};

Progress.defaultProps = {
  theme: 'primary',
  indicator: false,
  value: 0,
};

Progress.propTypes = {
  indicator: PropTypes.bool,
  theme: PropTypes.oneOf(['success', 'danger', 'primary', 'secondary']),
  value: PropTypes.number,
};

export default Progress;