import React from 'react';

interface ProgressBarProps {
  value: number;
  max?: number;
  label?: string;
  showPercentage?: boolean;
  size?: 'sm' | 'md' | 'lg';
  color?: 'blue' | 'green' | 'yellow' | 'red';
}

export function ProgressBar({
  value,
  max = 100,
  label,
  showPercentage = true,
  size = 'md',
  color = 'blue',
}: ProgressBarProps) {
  const percentage = Math.round((value / max) * 100);

  const barColor =
    color === 'green' || percentage >= 80
      ? 'var(--cra-green)'
      : percentage >= 50
      ? 'var(--cra-yellow)'
      : percentage >= 25
      ? 'var(--cra-orange)'
      : 'var(--cra-red)';

  return (
    <div className={`cra-progress cra-progress-${size}`}>
      {(label || showPercentage) && (
        <div className="cra-progress-header">
          {label && <span className="cra-progress-label">{label}</span>}
          {showPercentage && (
            <span className="cra-progress-value">{percentage}%</span>
          )}
        </div>
      )}
      <div className="cra-progress-track">
        <div
          className="cra-progress-bar"
          style={{ width: `${percentage}%`, backgroundColor: barColor }}
        />
      </div>
    </div>
  );
}