import type { CSSProperties } from "react";

import type { HomeContent } from "@/lib/schemas";

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

/**
 * The hero panel. It is HTML, not an image — a ruled record of the document
 * types Nexys actually produces, with illustrative values that the mono
 * caption names as demonstration data (Blueprint 05, H1).
 *
 * The posting sequence is pure CSS; see RecordPanel.module.css. No script runs
 * for it, which keeps the motion budget at zero bytes.
 */
export function RecordPanel({ panel }: { panel: HomeContent["panel"] }) {
  const [nrLabel, docLabel, modLabel, valLabel] = panel.columns;

  return (
    <div>
      <div className={styles.panel}>
        <div className={styles.head} aria-hidden="true">
          <span>{nrLabel}</span>
          <span>{docLabel}</span>
          <span className={styles.mod}>{modLabel}</span>
          <span className={styles.val}>{valLabel}</span>
        </div>

        <ol className={styles.rows}>
          {panel.rows.map((row, index) => {
            const [nr, doc, mod, val] = row;
            return (
              <li key={nr} className={styles.row} style={{ "--i": index } as CSSProperties}>
                <span className={styles.nr}>{nr}</span>
                <span className={styles.doc}>{doc}</span>
                <span className={styles.mod}>{mod}</span>
                <span className={styles.val}>{val}</span>
              </li>
            );
          })}
        </ol>

        <div className={styles.totalWrap}>
          <div className={styles.total}>
            <span className={styles.nr}>{panel.total[0]}</span>
            <span className={styles.doc}>
              <svg
                className={styles.tick}
                width="12"
                height="12"
                viewBox="0 0 12 12"
                fill="none"
                aria-hidden="true"
              >
                <path
                  d="M1 6.5 4.2 9.5 11 2.5"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="square"
                />
              </svg>
              {panel.total[1]}
            </span>
            <span className={styles.mod}>{panel.total[2]}</span>
            <span className={styles.val}>{panel.total[3]}</span>
          </div>
          <div className={styles.foot} aria-hidden="true" />
        </div>
      </div>

      <p className={styles.caption}>{panel.caption}</p>
    </div>
  );
}