// ---------------------------------------------------------------------------
// EditorialNote — italic Instrument Serif margin annotations.
//
// A small italicized serif note that "speaks" to the data next to it.
// Used in the dashboard to narrate the day's narrative: "Three NPIs
// are in flight" sits next to the KPI grid; an editorial note sits
// beside the chart explaining what it shows. The note itself is a
// single italic line of Instrument Serif with a tiny serif ampersand
// or hairline rule introducing it.
//
// This is the dashboard's "voice" — the moment the data stops being
// silent and reads as a story.
// ---------------------------------------------------------------------------

import * as React from "react";
import { cn } from "@/lib/utils";

export interface EditorialNoteProps {
  children: React.ReactNode;
  /** Optional lead-in (e.g. "↘", "§", "—" or a short label). */
  lead?: string;
  /** Optional secondary line shown below the note in mono caps. */
  caption?: string;
  /** Tone — dark canvas (default) or paper. */
  tone?: "dark" | "paper";
  className?: string;
}

export function EditorialNote({
  children,
  lead,
  caption,
  tone = "dark",
  className,
}: EditorialNoteProps) {
  const noteColor =
    tone === "paper"
      ? "hsl(var(--surface-ink))"
      : "hsl(var(--foreground))";
  const leadColor =
    tone === "paper"
      ? "hsl(var(--surface-ink-3))"
      : "hsl(var(--muted-foreground))";
  const captionColor =
    tone === "paper"
      ? "hsl(var(--surface-ink-3))"
      : "hsl(var(--muted-foreground))";

  return (
    <div className={cn("flex items-start gap-3", className)}>
      {lead ? (
        <span
          aria-hidden
          className="display italic shrink-0 leading-none mt-1"
          style={{ color: leadColor, fontSize: 18 }}
        >
          {lead}
        </span>
      ) : null}
      <div className="min-w-0">
        <p
          className="display italic leading-snug"
          style={{
            color: noteColor,
            fontSize: 15,
            letterSpacing: "-0.005em",
          }}
        >
          {children}
        </p>
        {caption ? (
          <p
            className="mono uppercase tracking-[0.18em] mt-1.5"
            style={{ color: captionColor, fontSize: 9.5 }}
          >
            {caption}
          </p>
        ) : null}
      </div>
    </div>
  );
}