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

import { subtitleVariants } from './variants'

import type { VariantProps } from 'class-variance-authority'
import { Children, ReactNode } from 'react'

interface SubtitleProps
  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
    VariantProps<typeof subtitleVariants> {
  asChild?: boolean
}

/**
 * @deprecated Use `Typography` instead.
 */
export default function Subtitle({
  asChild = false,
  className = '',
  color,
  textAlign,
  textTransform,
  type,
  ...props
}: SubtitleProps) {
  if (checkForEmptyChildren(props.children) === 0) {
    return null
  }
  const Comp = asChild ? Slot : 'p'
  const classNames = subtitleVariants({
    className,
    color,
    textAlign,
    textTransform,
    type,
  })
  return <Comp className={classNames} {...props} />
}

function checkForEmptyChildren(children: ReactNode) {
  return Children.toArray(children).filter((child) => {
    if (child === '') {
      return false
    } else if (child == null) {
      return false
    } else {
      return true
    }
  }).length
}