import type { ReactNode } from "react";

import { Container } from "@/components/Container";

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

/**
 * The title block every page opens with: a mono eyebrow, the H1 as a noun
 * phrase naming the thing (never a slogan — Blueprint 10), one sentence, and
 * an optional second column.
 *
 * `tone="navy"` puts the block on the company's surface. It is for pages where
 * Sulsys itself is the subject — /sulsys and /kontakt — so that the company's
 * own pages look like the company's, and the product's pages stay on paper.
 */
export function PageTitle({
  eyebrow,
  title,
  subtitle,
  oneLiner,
  aside,
  children,
  tone = "paper",
}: {
  eyebrow?: ReactNode[];
  title: string;
  subtitle?: string;
  oneLiner?: string;
  aside?: ReactNode;
  children?: ReactNode;
  tone?: "paper" | "navy";
}) {
  const navy = tone === "navy";
  return (
    <div
      className={navy ? `${styles.title} ${styles.titleNavy}` : styles.title}
      data-surface={navy ? "ink" : undefined}
    >
      <Container>
        <div className={aside ? styles.titleGrid : undefined}>
          <div>
            {eyebrow && eyebrow.length > 0 ? (
              <p className={styles.eyebrow}>
                {eyebrow.map((part, index) => (
                  <span key={index}>{part}</span>
                ))}
              </p>
            ) : null}
            <h1 className={styles.h1}>
              {title}
              {subtitle ? <span className={styles.subtitle}>{subtitle}</span> : null}
            </h1>
            {oneLiner ? <p className={styles.oneLiner}>{oneLiner}</p> : null}
            {children}
          </div>
          {aside ? <div>{aside}</div> : null}
        </div>
      </Container>
    </div>
  );
}