"use client";

export function PipelineStatusStrip({
  downloaded,
  transcribed,
  downloadFailed,
}: {
  downloaded: boolean;
  transcribed: boolean;
  downloadFailed: boolean;
}) {
  return (
    <div
      role="status"
      aria-label="pipeline status"
      className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground"
    >
      <StatusDot
        on={downloaded}
        label="Downloaded"
        tone={downloadFailed && !downloaded ? "danger" : undefined}
      />
      <StatusDot on={transcribed} label="Transcribed" />
    </div>
  );
}

function StatusDot({
  on,
  label,
  tone,
}: {
  on: boolean;
  label: string;
  tone?: "danger";
}) {
  const color = on
    ? "bg-success"
    : tone === "danger"
      ? "bg-destructive"
      : "bg-muted";
  return (
    <span className="inline-flex items-center gap-1.5">
      <span
        aria-hidden="true"
        className={`inline-block w-2 h-2 rounded-full ${color}`}
      />
      <span>{label}</span>
    </span>
  );
}