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

/**
 * The four canonical widths of the gold hairline. The codebase carried nine
 * ad hoc ones (`w-4`, `w-5`, `w-7`, `w-8`, `w-10`, `w-11`, `w-12`, `w-[18px]`,
 * `w-[26px] sm:w-12`, `w-[52px]`); each is rounded to the nearest step here
 * (see `docs/audits/home-best-practices-2026-08/08-dependencies-duplicates.md` §6).
 *
 * `grow` is not a width: it is the single self-drawing rule (`DesignSteps`),
 * whose width `.rule-grow` animates from 0 to 100% as it scrolls into view
 * (`globals.css`, `animation-timeline: view()`). It deliberately carries no
 * `w-*` utility — one would sit in Tailwind's `utilities` layer and override
 * the `components`-layer animation.
 */
const WIDTHS = {
  /** 18px — inline marker set beside a label or a list item. */
  sm: "w-4.5",
  /** 28px — rule stacked above a card heading. */
  md: "w-7",
  /** 44px — block rule under or above a section heading. */
  lg: "w-11",
  /** 26px, 48px from `sm` — the section eyebrow rule (`Overline`). */
  xl: "w-6.5 sm:w-12",
  /** No width: drawn by `.rule-grow` on reveal. */
  grow: "rule-grow",
} as const;

type RuleSize = keyof typeof WIDTHS;

type RuleProps = {
  size?: RuleSize;
  className?: string;
};

/**
 * The gold hairline of `docs/brand.md` § Structural Line Work — a 1px rule that
 * frames overlines, tops card headings and underscores section titles.
 *
 * Always decorative, so it is `aria-hidden` at the source: no caller has to
 * remember it. `bg-gold` is the charter token for rules and underlines
 * (`--color-burnished-gold` is reserved for decorative marks on dark surfaces,
 * where a caller can still override through `className`).
 *
 * Rendered as a `block` `<span>`: identical to the `<div>`s it replaces in flow
 * layout, valid inside the inline content of `Overline`, and a plain flex item
 * in the flex rows that use it.
 */
export default function Rule({ size = "lg", className }: RuleProps) {
  return (
    <span
      aria-hidden="true"
      className={cn("block h-px shrink-0 bg-gold", WIDTHS[size], className)}
    />
  );
}