interface TaskStatusBarProps {
  taskId?: string;
  status: string;
  progress: number;
  /** Label shown on the right side when idle (no active task). */
  idleLabel?: string;
}

export default function TaskStatusBar({ taskId, status, progress, idleLabel }: TaskStatusBarProps) {
  const isActive = Boolean(taskId);
  const normalizedProgress = Math.max(0, Math.min(100, Math.trunc(Number(progress) || 0)));
  return (
    <footer className="image-workbench-status">
      {isActive && normalizedProgress > 0 && (
        <div className="image-workbench-progress" style={{ transform: `scaleX(${normalizedProgress / 100})` }} />
      )}
      <span>{isActive ? `#${taskId}` : "就绪"}</span>
      <p>{status}</p>
      <em>{isActive ? `${normalizedProgress}%` : idleLabel || ""}</em>
    </footer>
  );
}