// One labelled fact in a page's fact list — the Downloads and Source pages'
// rows. `testId` marks the value, for the specs that compare it with a file.
export function Fact({
  label,
  children,
  testId,
}: {
  label: string;
  children: React.ReactNode;
  testId?: string;
}) {
  return (
    <div className="flex flex-col gap-1 border-t border-[var(--border)] py-3 sm:flex-row sm:gap-6">
      <span className="label-machine sm:w-32 sm:shrink-0 sm:pt-0.5">
        {label}
      </span>
      <span
        data-testid={testId}
        className="min-w-0 break-all text-sm text-[var(--muted-foreground)]"
      >
        {children}
      </span>
    </div>
  );
}