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

/**
 * Section eyebrow label — the "/ DISPLAY & OPTICS" mono kicker. The slash is a
 * deliberate brand system (rendered in the violet signal), not a generic dash.
 * Content-agnostic: pass the label as children.
 */
export function Eyebrow({
  children,
  className,
  slash = true,
}: {
  children: React.ReactNode;
  className?: string;
  /** Render the violet "/" prefix (the brand eyebrow signature). */
  slash?: boolean;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center font-mono text-caption uppercase tracking-[0.12em] text-muted",
        className,
      )}
    >
      {slash ? <span className="mr-1.5 text-brand">/</span> : null}
      {children}
    </span>
  );
}