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

/** Displays text within the TreeItem. */
export const TreeText = vui<'span', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Tree', useTreeContext())

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

TreeText.displayName = 'TreeText'
export default TreeText
