import type { ReactNode } from "react";

import { Container } from "./Container";
import styles from "./Section.module.css";

/**
 * A chapter.
 *
 * V4 retired the numbered mono tab that sat on every section's rule. It said
 * "documentation": a reader does not need "03 · ZINXHIRI" to know where they
 * are, and a page built from ten identically furnished bands reads as a
 * specimen sheet however good each band is. A chapter is announced by a change
 * of state instead — surface, scale, density — and carries at most one quiet
 * label when a long reference page genuinely needs orientation.
 *
 * Two surfaces, and one rule for choosing between them. Paper is a document
 * the business holds in its hands: a ledger, a register, a form. Navy is the
 * system running: the opening, the recordings, the company's signature. A
 * chapter is navy only when its subject is the program at work, never for
 * variety. `ink` remains for the footer.
 *
 * The section is still the unit of motion. It carries `data-enter`, and its
 * heading and lead are marked so one entrance plays the chapter's structure
 * in order. The unarmed state is the finished state.
 */
export function Section({
  id,
  label,
  heading,
  lead,
  action,
  surface = "paper",
  first = false,
  tight = false,
  children,
}: {
  id?: string;
  /** A quiet mono eyebrow. Use sparingly — most chapters need none. */
  label?: string;
  heading?: ReactNode;
  lead?: ReactNode;
  action?: ReactNode;
  surface?: "paper" | "alt" | "ink" | "navy";
  /** The first chapter under a title block: no top rule. */
  first?: boolean;
  /** Half the chapter padding, for a chapter that continues the one above. */
  tight?: boolean;
  children: ReactNode;
}) {
  const dark = surface === "ink" || surface === "navy";

  const className = [
    styles.section,
    first ? styles.first : null,
    tight ? styles.tight : null,
    surface === "ink" ? styles.ink : null,
    surface === "navy" ? styles.navy : null,
    surface === "alt" ? styles.alt : null,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    /*
     * `data-enter` is the hook the page's single entrance observer arms (see
     * components/SectionEntrance). It is empty here and stays empty unless
     * that component decides this chapter is below the fold — so the chapter
     * the server sends, and the one a reader without JavaScript keeps, is the
     * finished one.
     */
    <section
      id={id}
      className={className}
      data-surface={dark ? "ink" : surface === "alt" ? "alt" : "paper"}
      data-enter=""
    >
      <Container>
        {heading || action || lead || label ? (
          <div className={styles.head}>
            <div className={styles.heading}>
              {label ? <p className={styles.label}>{label}</p> : null}
              {heading ? (
                <h2 data-enter-part="heading">
                  <span className={styles.headingInner}>{heading}</span>
                </h2>
              ) : null}
              {lead ? (
                <p className={styles.lead} data-enter-part="lead">
                  {lead}
                </p>
              ) : null}
            </div>
            {action ? (
              <div className={styles.action} data-enter-part="lead">
                {action}
              </div>
            ) : null}
          </div>
        ) : null}
        {children}
      </Container>
    </section>
  );
}