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-kodo-red';
    if (isCompleted) return 'bg-kodo-lime';
    if (isPaused) return 'bg-kodo-gold';
    return 'bg-kodo-cyan';
  };

  return (
    <div className="w-full flex items-center gap-3">
      <div className="flex-1">
        <div className="flex justify-between text-[10px] uppercase font-bold text-gray-500 mb-1">
          <span>{status}</span>
          <span>{Math.round(progress)}%</span>
        </div>
        <div className="h-1.5 bg-kodo-steel/50 rounded-full overflow-hidden">
          <div 
            className={`h-full transition-all duration-300 ${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-kodo-lime transition-colors" title="Resume">
              <Play className="w-3 h-3 fill-current" />
            </button>
          ) : (
            <button onClick={onPause} className="p-1 hover:text-white text-kodo-gold transition-colors" title="Pause">
              <Pause className="w-3 h-3 fill-current" />
            </button>
          )}
          <button onClick={onCancel} className="p-1 hover:text-white text-kodo-red transition-colors" title="Cancel">
            <X className="w-3 h-3" />
          </button>
        </div>
      )}
    </div>
  );
};