Eyebrow

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const eyebrowVariants = cva(
  "inline-flex items-center gap-2 text-eyebrow font-medium uppercase [&>svg]:size-3.5",
  {
    variants: {
      tone: {
        default: "text-foreground/85",
        muted: "text-muted-foreground",
        brand: "text-brand",
        inverse: "text-white/85",
      },
    },
    defaultVariants: {
      tone: "default",
    },
  }
)

/** Small uppercase kicker above a heading. Tracking drops to 0 under `lang="ar"`. */
function Eyebrow({
  className,
  tone = "default",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    props: mergeProps<"p">({ className: cn(eyebrowVariants({ tone }), className) }, props),
    render,
    state: { slot: "eyebrow", tone },
  })
}

export { Eyebrow, eyebrowVariants }