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

import { footnoteFontOnlyVariants, footnoteVariants } from "./variants"

import type { VariantProps } from "class-variance-authority"

interface FootnoteProps
  extends
    Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
    VariantProps<typeof footnoteVariants> {
  asChild?: boolean
  fontOnly?: boolean
}

/**
 * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
 */
export default function Footnote({
  asChild = false,
  className = "",
  color,
  fontOnly = false,
  textAlign,
  textTransform,
  type,
  ...props
}: FootnoteProps) {
  const Comp = asChild ? Slot : "p"
  const classNames = fontOnly
    ? footnoteFontOnlyVariants({
        className,
        textAlign,
        textTransform,
        type,
      })
    : footnoteVariants({
        className,
        color,
        textAlign,
        textTransform,
        type,
      })
  return <Comp className={classNames} {...props} />
}