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

/** Displays the text label of the button. */
export const ButtonText = vui<'span', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Button', useButtonContext())

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

ButtonText.displayName = 'ButtonText'

export default ButtonText
