import { cn } from "@/lib/utils";

export interface NumeralProps {
  /** „01“ */
  value: string;
  /**
   * Ground the numeral sits on. Omit to resolve it from the nearest
   * `[data-theme]` ancestor (CSS only): `.gold-text` on dark, flat `--gold-700` on light.
   */
  theme?: "dark" | "light";
  /** `position: sticky; top: calc(50vh − .45em)` (desktop). Default true. */
  sticky?: boolean;
  className?: string;
}

const GOLD_TEXT_DARK =
  "[[data-theme=dark]_&]:bg-[image:var(--gold-gradient-text)] [[data-theme=dark]_&]:bg-clip-text [[data-theme=dark]_&]:text-gold [[data-theme=dark]_&]:[-webkit-text-fill-color:transparent]";

/**
 * Section numeral: Playfair 400, `clamp(4rem, 2rem + 8vw, 10rem)`,
 * lining numerals. Decorative – the accessible section number lives in the
 * Section's mono meta line, so this is `aria-hidden`.
 */
export function Numeral({ value, theme, sticky = true, className }: NumeralProps) {
  const colour =
    theme === "dark"
      ? "gold-text"
      : theme === "light"
        ? "text-gold-700"
        : cn("text-gold-700", GOLD_TEXT_DARK);

  return (
    <span
      aria-hidden="true"
      className={cn(
        "block select-none font-display text-[clamp(4rem,2rem+8vw,10rem)] font-normal leading-[0.9] tracking-[-0.01em] [font-variant-numeric:lining-nums]",
        sticky && "lg:sticky lg:top-[calc(50vh_-_0.45em)]",
        colour,
        className,
      )}
    >
      {value}
    </span>
  );
}

export default Numeral;