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

/** Displays text within the ListItem. */
export const ListText = vui<'span', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('List', useListContext())

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

ListText.displayName = 'ListText'
export default ListText
