import React from 'react';
import PropTypes from 'prop-types';
import { getPercentage } from 'sports-util';
import styles from './progress-bar.module.scss';

const ProgressBar = ({ total, value, cssWidth = 160, isAway = false }) => {
  const percentage = getPercentage(value, total, cssWidth);

  const barstyle = {
    '--percentage': `${percentage}px`,
  };

  return (
    <div className={`${styles.container} ${isAway ? styles.away : ''}`}>
      <div style={barstyle} className={`${styles.bar} ${isAway ? styles.baraway : ''}`} />
    </div>
  );
};

ProgressBar.propTypes = {
  total: PropTypes.number,
  value: PropTypes.number,
  cssWidth: PropTypes.number,
  isAway: PropTypes.bool,
};

export default ProgressBar;
