import { useStyleConfig, vui } from '../core'
import T, { TProps } from '../t'
import { cs } from '../utils'
import { useTagContext } from './context'

/** Displays text within the Tag. */
export const TagText = vui<'span', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Tag', useTagContext())

  return <T className={cs('vui-tagText', className)} fontSize="inherit" ref={ref} {...styles.text} {...rest} />
})

TagText.displayName = 'TagText'

export default TagText
