import { cn } from '@/lib/utils';

interface ProgressBarProps {
  value: number; // 0-100
  label?: string;
  color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
  showPercentage?: boolean;
  className?: string;
}

const colorVariants = {
  default: 'bg-[var(--primary)]',
  primary: 'bg-[var(--primary)]',
  success: 'bg-[var(--success)]',
  warning: 'bg-[var(--accent)]',
  destructive: 'bg-[var(--destructive)]'
};

export function ProgressBar({ 
  value, 
  label, 
  color = 'default',
  showPercentage = true,
  className 
}: ProgressBarProps) {
  const clampedValue = Math.min(Math.max(value, 0), 100);
  
  return (
    <div className={cn("space-y-2", className)}>
      {(label || showPercentage) && (
        <div className="flex items-center justify-between">
          {label && (
            <span className="text-sm font-medium text-[var(--foreground)]">
              {label}
            </span>
          )}
          {showPercentage && (
            <span className="text-sm font-medium text-[var(--muted-foreground)]">
              {Math.round(clampedValue)}%
            </span>
          )}
        </div>
      )}
      
      <div className="w-full bg-[var(--border)] rounded-full h-2">
        <div 
          className={cn(
            "h-2 rounded-full transition-all duration-300",
            colorVariants[color]
          )}
          style={{ width: `${clampedValue}%` }}
        />
      </div>
    </div>
  );
}