import Rule from "@/components/ui/Rule";
import { cn } from "@/lib/utils";
import type { ReactNode } from "react";

// `Rule` is a block-level span; the eyebrow needs it inline so it flows with the
// label (see the wrapping note below).
const RULE = "inline-block align-middle";

// Word joiner (U+2060): glues each rule to its adjacent word so the label wraps
// at its own spaces while a rule can never end up alone on a line.
const WJ = String.fromCharCode(0x2060);

type OverlineProps = {
  children: ReactNode;
  /**
   * "center"     — gold hairline on both sides at every breakpoint (centered headings).
   * "responsive" — both rules while the heading is centered (mobile/tablet); a single
   *                leading rule once it left-aligns from lg (two-column / split sections).
   */
  align?: "center" | "responsive";
  /**
   * Rendered element. Defaults to the presentational `span`; pass a heading tag
   * where the eyebrow *is* the section heading (About), so it lands in the
   * document outline and can name its section through `aria-labelledby`.
   * Tailwind's preflight zeroes heading margins, size and weight, so the
   * rendering is byte-for-byte identical whichever tag is used.
   */
  as?: "span" | "p" | "h2" | "h3";
  /** Anchor for an `aria-labelledby` on the owning section. */
  id?: string;
  className?: string;
};

/**
 * The section eyebrow: a small-caps gold label framed by hairline gold rules.
 *
 * The rules are inline (not flex items) so a long label that wraps to two lines
 * keeps them flowing with the text — leading rule at the start of line one, trailing
 * rule at the end of line two — instead of stranding them at the container edges.
 * Centered layouts keep a rule on each side; split layouts (hero, About, Certification)
 * drop the trailing rule from lg so the label reads left-aligned.
 */
export default function Overline({
  children,
  align = "center",
  as: Tag = "span",
  id,
  className,
}: OverlineProps) {
  const responsive = align === "responsive";
  return (
    <Tag
      id={id}
      className={cn(
        "block text-center text-label uppercase tracking-caps-wide text-gold-text",
        responsive && "lg:text-left",
        className,
      )}
    >
      <Rule size="xl" className={cn(RULE, "mr-4")} />
      {WJ}
      {children}
      {WJ}
      <Rule size="xl" className={cn(RULE, "ml-4", responsive && "lg:hidden")} />
    </Tag>
  );
}