import { checkLook, runDuration, workflowOf } from '#/lib/checks.js';
import { timeAgo } from '#/lib/format.js';
import { cn } from '#/lib/utils.js';

/**
 * One run as a single line: which workflow ran, how long it took, and how it
 * ended. Every listing of runs sits under something that already names the
 * commit, so the line carries no sha and no ref.
 *
 * This holds no anchor and no button of its own. The caller decides whether
 * the line opens the run's page or expands in place.
 *
 * The workflow name takes the width, and the cost and time close the row at
 * the right, so the rows read as columns down the page however wide the
 * window. A caller that already names when the runs happened turns off
 * showTime. Every run of one commit started within a minute of the others.
 */
export function CheckRow({ check, className, showTime = true }) {
  const look = checkLook(check.status);
  const took = runDuration(check);

  return (
    <span
      className={cn(
        'flex items-center gap-x-3 px-4 py-2 text-[13px]',
        className,
      )}
    >
      <look.Icon className={cn('size-4 shrink-0', look.className)} />
      <span className="min-w-0 flex-1 truncate text-foreground">
        {workflowOf(check)}
      </span>
      {took && (
        <span className="shrink-0 text-[12px] text-faint tabular-nums">
          {took}
        </span>
      )}
      {showTime && (
        <span className="shrink-0 text-[12px] text-faint">
          {timeAgo(check.startedAt)}
        </span>
      )}
    </span>
  );
}