import type { UseFileBrowserAppType } from '../useFileBrowserApp';

type UploadProgressProps = {
  fileBrowserManager: UseFileBrowserAppType;
};

export const UploadProgress = ({ fileBrowserManager }: UploadProgressProps) => {
  const { uploadProgress } = fileBrowserManager;

  if (uploadProgress === null) return null;

  return (
    <div className="shrink-0 px-4 pt-3">
      <div className="flex items-center justify-between text-sm text-duck-dark/70 mb-1">
        <span>Uploading...</span>
        <span>{uploadProgress}%</span>
      </div>
      <div className="h-2 rounded-full bg-duck-dark/10 overflow-hidden">
        <div
          className="h-full rounded-full bg-duck-teal transition-all duration-300"
          style={{ width: `${uploadProgress}%` }}
        />
      </div>
    </div>
  );
};
