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

/** Displays text within the Notification. */
export const NotificationText = vui<'p', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Notification', useNotificationContext())

  return (
    <T
      className={cs('vui-notificationText', className)}
      flex="1"
      lineHeight="24px"
      minW={0}
      mx="16px"
      my="16px"
      ref={ref}
      {...styles.text}
      {...rest}
    />
  )
})

NotificationText.displayName = 'NotificationText'
export default NotificationText
