Brand

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

export type BrandWeight = "normal" | "medium" | "semibold" | "bold"

const WEIGHT: Record<BrandWeight, string> = {
  normal: "",
  medium: "font-medium",
  semibold: "font-semibold",
  bold: "font-bold",
}

/**
 * The {SUBDOMAIN}.MD wordmark shared by every project on mattdowney.com:
 * UI.MD lives at ui.mattdowney.com, SKILLS.MD at skills.mattdowney.com, and
 * so on. Rendered as a single inline span so the mark stays consistent
 * everywhere; `name` is upper-cased here so the all-caps convention cannot
 * drift per call site. Pass `weight` to match the surrounding emphasis
 * (`normal` inherits it).
 */
// @use-when the {SUBDOMAIN}.MD wordmark on a mattdowney.com project. Any other
// site puts its own logo in SiteHeader's `brand` slot instead.
function Brand({
  name = "UI",
  weight = "normal",
  className,
}: {
  name?: string
  weight?: BrandWeight
  className?: string
}) {
  return (
    <span data-slot="brand" className={cn("tracking-tight", WEIGHT[weight], className)}>
      {/* One expression, not `{name}.MD`: two JSX text children render with an
          HTML comment between them (`SKILLS<!-- -->.MD`), which breaks any
          crawler doing a contiguous text match on the wordmark, Google's
          OAuth brand check among them. */}
      {`${name.toUpperCase()}.MD`}
    </span>
  )
}

export { Brand }