import React from 'react';

type SimpleProgressBarProps = {
  progress: number; // 0-100
  tone?: 'success' | 'info' | 'warning';
  size?: 'small' | 'md';
  animated?: boolean;
};

export const SimpleProgressBar = ({
  progress,
  tone = 'info',
  size = 'md',
  animated = false,
}: SimpleProgressBarProps) => {
  const pct = Math.max(
    0,
    Math.min(100, Number.isFinite(progress) ? progress : 0)
  );
  const height = size === 'small' ? '8px' : '12px';
  const barColor =
    tone === 'success' ? '#059669' : tone === 'warning' ? '#f59e0b' : '#2563eb'; // emerald / amber / blue

  return (
    <div
      style={{
        width: '100%',
        backgroundColor: '#e5e7eb', // gray-200
        borderRadius: 9999,
        height,
        overflow: 'hidden',
      }}
    >
      <div
        style={{
          width: `${pct}%`,
          backgroundColor: barColor,
          height: '100%',
          borderRadius: 9999,
          transition: animated ? 'width 0.5s ease' : undefined,
        }}
      />
    </div>
  );
};