import { duration } from '#/lib/checks.js';
import { cn } from '#/lib/utils.js';

/**
 * What the runner ran, in order, and how each step ended. The exit code
 * decides how a step's name reads.
 */
export function CheckSteps({ steps }) {
  return (
    <div className="py-1">
      {steps.map((step) => {
        const failed = step.exitCode !== 0;
        return (
          <div
            key={step.name}
            className="flex items-baseline gap-4 px-(--gutter) py-1.5 text-[12.5px]"
          >
            {/* The step takes what it needs up to a measure, and what it
                cost follows it. Every step reaches that measure on a wide
                window, so the times line up down the list. */}
            <span
              className={cn(
                'min-w-0 max-w-[28rem] flex-1 truncate',
                failed ? 'text-destructive' : 'text-muted-foreground',
              )}
            >
              {step.name}
            </span>
            <span className="w-16 shrink-0 text-right font-mono text-[11.5px] text-faint tabular-nums">
              {typeof step.durationMs === 'number'
                ? duration(step.durationMs)
                : ''}
            </span>
            <span
              className={cn(
                'w-12 shrink-0 text-right font-mono text-[11.5px]',
                failed ? 'text-destructive' : 'text-faint',
              )}
            >
              {failed ? `exit ${step.exitCode}` : 'ok'}
            </span>
          </div>
        );
      })}
    </div>
  );
}