import styles from "./FactRow.module.css";

export type FactRowItem = {
  heading: string;
  body: string;
};

/**
 * The "why a local system" rows. The number of rows is content-driven: each
 * one renders only if its fact is verified, so this component never knows how
 * many it will be handed (BLUEPRINT-DELTA D-13, D-16, D-17).
 */
export function FactRows({
  items,
  surface = "paper",
}: {
  items: FactRowItem[];
  surface?: "paper" | "ink";
}) {
  if (items.length === 0) return null;

  return (
    <div className={[styles.list, surface === "ink" ? styles.ink : null].filter(Boolean).join(" ")}>
      {items.map((item, index) => (
        <div key={item.heading} className={styles.row}>
          <p className={styles.index}>{String(index + 1).padStart(2, "0")}</p>
          <div>
            <h3 className={styles.heading}>{item.heading}</h3>
            <p className={styles.body}>{item.body}</p>
          </div>
        </div>
      ))}
    </div>
  );
}