import { splitWordmark } from "../lib/brand";

// The two-weight wordmark: Archivo at `font-stretch: 118%`, the lead (the
// SUBJECT's name — "Jer", "Rekieta", "Archi") heavy in the foreground, the
// suffix light and muted. The split is configured (site.json `wordmarkLead`,
// PROJECT_WORDMARK_LEAD), never guessed; with no usable lead the whole title
// is the lead.
//
// The two spans are adjacent with NO whitespace between them and stay inline,
// so the enclosing link's accessible name is the title exactly ("Jeralyzer",
// not "Jer alyzer"). Do not make this element `flex`: that would blockify the
// spans and the browser would put a space between them in the name.
//
// Size, leading and truncation come from `className`. The face is Archivo,
// the display face on every base (common/styles/fonts.ts `--font-display`,
// with the `wdth` axis the stretch needs). `leadStyle` is laid over the lead's
// own style (the homepage's instance cards tint it in the site's accent).
export function Wordmark({
  title,
  lead,
  className,
  leadStyle,
  style,
}: {
  title: string;
  lead?: string;
  className?: string;
  leadStyle?: React.CSSProperties;
  // Laid over the outer span's own (the export header reserves its width).
  style?: React.CSSProperties;
}) {
  const parts = splitWordmark(title, lead);
  return (
    <span
      className={className}
      data-wordmark=""
      style={{
        fontFamily: "var(--font-display)",
        fontStretch: "118%",
        ...style,
      }}
    >
      <span
        data-wordmark-lead=""
        style={{ fontWeight: 720, color: "var(--foreground)", ...leadStyle }}
      >
        {parts.lead}
      </span>
      {parts.suffix ? (
        <span
          data-wordmark-suffix=""
          style={{ fontWeight: 380, color: "var(--muted-foreground)" }}
        >
          {parts.suffix}
        </span>
      ) : null}
    </span>
  );
}