import React from 'react';
import { ProgressBar, Badge } from 'react-bootstrap';
import PropTypes from 'prop-types';

const ProgressDisplay = ({ percentage, showLabel = true, height, showBadge = false }) => {
  // Determine progress bar variant based on percentage
  const getProgressVariant = (value) => {
    if (value < 25) return 'danger';
    if (value < 50) return 'warning';
    if (value < 75) return 'info';
    return 'success';
  };

  // Determine text for badge
  const getProgressText = (value) => {
    if (value < 25) return 'Just Started';
    if (value < 50) return 'In Progress';
    if (value < 75) return 'Well Advanced';
    if (value < 100) return 'Almost Complete';
    return 'Completed';
  };

  const variant = getProgressVariant(percentage);
  
  return (
    <div className="progress-display">
      <div className="d-flex align-items-center mb-1 justify-content-between">
        {showLabel && (
          <div className="progress-percentage">
            {percentage}% Complete
          </div>
        )}
        
        {showBadge && (
          <Badge bg={variant} className="ms-2">
            {getProgressText(percentage)}
          </Badge>
        )}
      </div>
      
      <ProgressBar 
        variant={variant} 
        now={percentage} 
        style={{ height: height || '0.75rem' }}
        className="mb-2"
      />
    </div>
  );
};

ProgressDisplay.propTypes = {
  percentage: PropTypes.number.isRequired,
  showLabel: PropTypes.bool,
  height: PropTypes.string,
  showBadge: PropTypes.bool
};

export default ProgressDisplay;
