import type { CSSProperties } from "react";

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

/**
 * What a module produces, set like a register rather than a three-column
 * table: the document's name in display type, what it does in text, and what
 * it connects to as a small stamp. Rows post one after another when the
 * chapter enters — written, not faded.
 *
 * The verified capabilities close the register as a short list. They used to
 * be a chapter of their own, a bullet grid two screens below the documents it
 * restated; here they are the footnote to the register they belong to.
 */
export function DocumentRegister({
  documents,
  connectsLabel,
  features,
  featuresLabel,
}: {
  documents: { doc: string; does: string; connects: string }[];
  connectsLabel: string;
  features: { text: string; fact: string }[];
  featuresLabel: string;
}) {
  return (
    <div className={styles.root}>
      <ol className={styles.register}>
        {documents.map((row, index) => (
          <li key={row.doc} className={styles.row} style={{ "--i": index } as CSSProperties}>
            <span className={styles.name}>{row.doc}</span>
            <span className={styles.body}>
              <span className={styles.does}>{row.does}</span>
              <span className={styles.stamp}>
                <span className={styles.stampLabel}>{connectsLabel}</span>
                {row.connects}
              </span>
            </span>
          </li>
        ))}
      </ol>

      {features.length > 0 ? (
        <div className={styles.features}>
          <p className={styles.featuresLabel}>{featuresLabel}</p>
          <ul className={styles.featureList}>
            {features.map((feature) => (
              <li key={feature.fact} className={styles.feature}>
                {feature.text}
              </li>
            ))}
          </ul>
        </div>
      ) : null}
    </div>
  );
}