import React from 'react';
import classNames from 'classnames';
import { BANNER_APPEARANCES } from '../Banner';

type Props = {
  progress?: number,
  isIndeterminate?: boolean,
  className?: string
};

const ProgressBar = (props: Props) => {
  const { progress, className, isIndeterminate } = props;

  let progressValue = progress ? Math.ceil(progress) : 0;

  if (progressValue > 100) {
    progressValue = 100;
  } else if (progressValue < 0) {
    progressValue = 0;
  }

  const progressStyle = { width: `${progressValue}%` };
  const classNameString = classNames('ruiProgressBar__progress', {
    'ruiProgressBar__progress--indeterminate': isIndeterminate
  });

  return (
    <div className={classNames('ruiProgressBar', className)}>
      <div className={classNameString} style={progressStyle} />
    </div>
  );
};

export default ProgressBar;