function bytesToSize(bytes: number) {
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  if (bytes === 0) return 'n/a';
  const value = Math.floor(Math.log(bytes) / Math.log(1024));
  const i = parseInt(String(value), 10);
  if (i === 0) return `${bytes} ${sizes[i]})`;
  return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
}

interface FileItemProps {
  file: { name: string; size: number };
  removeFile: React.MouseEventHandler;
  error?: string;
  progress: number;
}

export const FileItem = ({
  file,
  removeFile,
  error,
  progress,
}: FileItemProps) => {
  return (
    <div className="w100 relative flex alignCenter justifyBetween padding4 pill overflowHidden fz16 bg-grayA01">
      <div className="w100 fz14 tdn tal medium truncate">{file.name}</div>

      {error ? (
        <span className="c-red nowrap">{error}</span>
      ) : (
        <span className="c-gray nowrap">{bytesToSize(file.size)}</span>
      )}

      <div className="w100 tar">
        <span className="cup" onClick={removeFile}>
          ✕
        </span>
      </div>

      <div
        className="absolute progress"
        style={{
          width: progress + '%',
          ...(error && { background: '#e91e6321' }),
        }}
      ></div>
    </div>
  );
};