import React from 'react';
import { useTheme } from '../../contexts/ThemeContext';

interface ProgressBarProps {
  percent: number;
  color?: 'accent' | 'green' | 'orange' | 'red';
  showLabel?: boolean;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({
  percent,
  color = 'accent',
  showLabel = false,
}) => {
  const { theme } = useTheme();

  const colorStyles = {
    accent: theme.gradientAccent,
    green: `linear-gradient(90deg, ${theme.green}, #00ff88)`,
    orange: `linear-gradient(90deg, ${theme.orange}, #ffaa00)`,
    red: '#ff4444',
  };

  return (
    <div className="flex items-center gap-3">
      <div
        className="h-2 rounded-full flex-1"
        style={{ backgroundColor: theme.bgHover }}
      >
        <div
          className="h-full rounded-full transition-all duration-300"
          style={{
            width: `${percent}%`,
            background: colorStyles[color],
          }}
        />
      </div>
      {showLabel && (
        <span className="font-mono text-xs text-t-accent">{percent}%</span>
      )}
    </div>
  );
};