veza/apps/web/src/components/upload/UploadProgressBar.tsx

import React from 'react';
import { Play, Pause, X } from 'lucide-react';

interface UploadProgressBarProps {
  progress: number; // 0 to 100
  status: 'uploading' | 'paused' | 'completed' | 'error' | 'processing';
  onPause?: () => void;
  onResume?: () => void;
  onCancel?: () => void;
}

export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
  progress,
  status,
  onPause,
  onResume,
  onCancel,
}) => {
  const isPaused = status === 'paused';
  const isCompleted = status === 'completed';
  const isError = status === 'error';

  const getColor = () => {
    if (isError) return 'bg-destructive';
    if (isCompleted) return 'bg-success';
    if (isPaused) return 'bg-kodo-gold';
    return 'bg-primary';
  };

  return (
    <div className="w-full flex items-center gap-4">
      <div className="flex-1">
        <div className="flex justify-between text-xs uppercase font-bold text-muted-foreground mb-1">
          <span>{status}</span>
          <span>{Math.round(progress)}%</span>
        </div>
        <div className="h-1.5 bg-muted rounded-full overflow-hidden">
          <div
            className={`h-full transition-all duration-[var(--duration-normal)] ${getColor()} ${status === 'uploading' ? 'animate-pulse' : ''}`}
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>

      {!isCompleted && !isError && (
        <div className="flex gap-1">
          {isPaused ? (
            <button
              onClick={onResume}
              className="p-1 hover:text-white text-success transition-colors"
              title="Resume"
            >
              <Play className="w-3 h-3 fill-current" />
            </button>
          ) : (
            <button
              onClick={onPause}
              className="p-1 hover:text-white text-warning transition-colors"
              title="Pause"
            >
              <Pause className="w-3 h-3 fill-current" />
            </button>
          )}
          <button
            onClick={onCancel}
            className="p-1 hover:text-white text-destructive transition-colors"
            title="Cancel"
          >
            <X className="w-3 h-3" />
          </button>
        </div>
      )}
    </div>
  );
};