import fileProgressStyles from "~/styles/components/file-progress.css?url";

interface FileProgressProps {
  fileName: string;
  fileSize?: string;
  progress: number;
  speed?: string;
  className?: string;
}

export function links() {
  return [{ rel: "stylesheet", href: fileProgressStyles }];
}

export function FileProgress({
  fileName,
  fileSize,
  progress,
  speed = "0KB/s",
  className = ""
}: FileProgressProps) {
  return (
    <div className={`progress-container ${className}`}>
      <div className="mb-2 flex justify-between items-center">
        <span className="font-medium">{fileName}</span>
        {fileSize && <span className="text-secondary text-sm">{fileSize}</span>}
      </div>
      <div className="progress-bar">
        <div 
          className="progress-bar-inner" 
          style={{ width: `${progress}%` }}
          role="progressbar"
          aria-valuenow={progress}
          aria-valuemin={0}
          aria-valuemax={100}
        ></div>
      </div>
      <div className="progress-text">
        <span>{progress}%</span>
        <span>{speed}</span>
      </div>
    </div>
  );
}