import type { Kind } from "./status";

/** A thin ruled progress bar. `indeterminate` for open-ended phases (searching,
 *  finishing); otherwise a determinate fill to `percent` with a live readout. */
export function ProgressBar({
  kind,
  indeterminate,
  percent,
  caption,
}: {
  kind: Kind;
  indeterminate?: boolean;
  percent?: number;
  caption?: string;
}) {
  if (indeterminate) {
    return (
      <div className="prog">
        <div className="bar indet">
          <span />
        </div>
        <div className="pct muted">{caption ?? "…"}</div>
      </div>
    );
  }
  const pct = Math.min(100, Math.max(0, percent ?? 0));
  return (
    <div className="prog">
      <div className="bar">
        <span style={{ width: `${pct}%` }} />
      </div>
      <div className="pct">{caption ?? `${Math.round(percent ?? 0)}%`}</div>
    </div>
  );
}