import { cloneElement, isValidElement } from "react"

import { variants } from "./variants"

import type { TypographyProps } from "./types"

export function Typography({
  variant,
  className,
  children,
}: TypographyProps): React.ReactNode {
  if (!isValidElement(children)) return null

  const classNames = variants({
    variant,
  })

  return cloneElement(children, {
    ...children.props,
    className: [className, children.props.className, classNames]
      .filter(Boolean)
      .join(" "),
  })
}