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

/**
 * Eyebrow — petit label majuscule rubis avec ◆ géométrique en préfixe.
 * Marqueur de section, signature visible partout. Cf. /docs/marque.md §4.
 *
 * On préfère ça à un sous-titre classique : moins corporate, plus identifiable.
 */
type EyebrowProps = {
  children: React.ReactNode;
  /** Désactive le ◆ préfixe (rare — utile dans des contextes inline). */
  withoutMark?: boolean;
  /** Couleur custom (default rubis). Doit rester dans la palette marque. */
  tone?: "rubis" | "ink";
  className?: string;
};

export function Eyebrow({ children, withoutMark = false, tone = "rubis", className }: EyebrowProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-2 font-sans text-[11px] font-semibold uppercase leading-tight",
        "tracking-[0.14em]",
        tone === "rubis" ? "text-rubis" : "text-ink-3",
        className,
      )}
    >
      {!withoutMark && (
        <span
          aria-hidden="true"
          className="inline-block size-[7px] rotate-45 bg-current"
        />
      )}
      {children}
    </span>
  );
}
