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(' '),
  })
}