frontend/src/components/ProgressBar.tsx

interface ProgressBarProps {
  progress: number;
  message: string;
}

export function ProgressBar({ progress, message }: ProgressBarProps) {
  const pct = Math.round(progress * 100);

  return (
    <div className="bg-bg-card rounded-xl p-4 md:p-5 space-y-3">
      <div className="flex items-center justify-between">
        <span className="text-sm text-text-secondary">{message}</span>
        <span className="text-sm font-mono text-accent">{pct}%</span>
      </div>
      <div className="w-full h-2 bg-bg-primary rounded-full overflow-hidden">
        <div
          className="h-full rounded-full transition-all duration-300 ease-out"
          style={{
            width: `${pct}%`,
            background: `linear-gradient(90deg, #7c3aed, #ec4899)`,
          }}
        />
      </div>
    </div>
  );
}