import cc from 'classcat';
import './ProgressBar.css';

export interface ProgressBarProps {
  progress: number;
  animate: boolean;
  className?: string;
  progressClassName?: string;
  style?: React.CSSProperties;
  progressStyle?: React.CSSProperties;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({
  progress,
  animate = true,
  className,
  progressClassName,
  style,
  progressStyle,
  children,
}) => {
  return (
    <div className={cc(['progress-bar', className])} style={style}>
      <div
        className={cc([
          'progress-bar__progress',
          progressClassName,
          { animate },
        ])}
        style={{
          width: Math.max(0, Math.min(progress, 100)) + '%',
          height: '100%',
          top: 0,
          left: 0,
          zIndex: -1,
          ...progressStyle,
        }}
      ></div>
      {children}
    </div>
  );
};