import type { ReactNode } from "react";

type Props =
  | {
      variant: "masthead";
      id?: string;
      children: ReactNode;
      subtitle?: undefined;
      className?: string;
    }
  | {
      variant: "section";
      id?: string;
      children: ReactNode;
      /** Chú thích triện — ví dụ bucket phân loại nội dung. */
      subtitle?: string;
      className?: string;
    };

export function NarrativeHeading(props: Props) {
  if (props.variant === "masthead") {
    return (
      <header className={`text-center ${props.className ?? ""}`}>
        <h2
          id={props.id}
          className="ctkp-narrative-masthead-title font-ctkp-serif text-[1.35rem] font-medium tracking-[0.14em] text-[color:var(--ctkp-narrative-accent)] sm:text-[1.5rem] md:text-[1.65rem]"
        >
          {props.children}
        </h2>
        <div className="ctkp-narrative-masthead-rule mx-auto mt-5 max-w-[min(22rem,88%)]" aria-hidden />
      </header>
    );
  }

  return (
    <header className={`space-y-2 ${props.className ?? ""}`}>
      <div className="flex flex-wrap items-end gap-x-3 gap-y-1">
        <h3
          id={props.id}
          className="font-ctkp-serif text-[1.05rem] font-semibold tracking-[0.06em] text-[color:var(--ctkp-narrative-ink-strong)] sm:text-[1.1rem] md:text-[1.125rem]"
        >
          <span className="ctkp-narrative-section-mark mr-2 select-none opacity-[0.42]" aria-hidden>
            ◈
          </span>
          {props.children}
        </h3>
        <span className="ctkp-narrative-section-inkline min-w-[2.5rem] flex-1 pb-1 opacity-80" aria-hidden />
      </div>
      {props.subtitle ?
        <p className="ctkp-narrative-rubric font-ctkp-serif text-[10px] font-medium uppercase tracking-[0.28em] text-[color:var(--ctkp-narrative-caption)] opacity-[0.72] sm:text-[11px]">
          {props.subtitle}
        </p>
      : null}
    </header>
  );
}