import { Slot } from "@radix-ui/react-slot"

import { captionVariants, fontOnlycaptionVariants } from "./variants"

import type { CaptionLabelProps } from "./captionLabel"

export default function CaptionLabel({
  asChild = false,
  className = "",
  color,
  fontOnly = false,
  textAlign,
  textTransform,
  uppercase,
  ...props
}: CaptionLabelProps) {
  const Comp = asChild ? Slot : "span"
  const classNames = fontOnly
    ? fontOnlycaptionVariants({
        className,
        textTransform,
        uppercase,
      })
    : captionVariants({
        className,
        color,
        textTransform,
        textAlign,
        uppercase,
      })
  return <Comp className={classNames} {...props} />
}