import { Box } from './Box';

export interface ProgressBarProps {
  value: number;
  max?: number;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
  color?: string; // Alias for intent
  size?: 'sm' | 'md' | 'lg';
  marginBottom?: any;
  mb?: any; // Alias for marginBottom
}

export const ProgressBar = ({ 
  value, 
  max = 100, 
  intent = 'primary',
  color: colorProp,
  size = 'md',
  marginBottom,
  mb
}: ProgressBarProps) => {
  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);

  const intentColorMap = {
    primary: 'var(--ui-color-intent-primary)',
    success: 'var(--ui-color-intent-success)',
    warning: 'var(--ui-color-intent-warning)',
    critical: 'var(--ui-color-intent-critical)',
    telemetry: 'var(--ui-color-intent-telemetry)',
  };

  const color = colorProp || intentColorMap[intent];

  const sizeMap = {
    sm: '0.25rem',
    md: '0.5rem',
    lg: '1rem',
  };

  return (
    <Box 
      fullWidth 
      bg="var(--ui-color-bg-surface-muted)" 
      style={{ height: sizeMap[size], borderRadius: '9999px', overflow: 'hidden' }}
      marginBottom={marginBottom || mb}
    >
      <Box 
        fullHeight 
        bg={color} 
        style={{ width: `${percentage}%`, transition: 'width 0.3s ease-in-out' }} 
      />
    </Box>
  );
};