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

/** Displays a title within the Notification. */
export const NotificationTitle = vui<'span', TProps>((props, ref) => {
  const { className, ...rest } = props
  const styles = useStyleConfig('Notification', useNotificationContext())

  return (
    <T className={cs('vui-notificationTitle', className)} fontWeight="demi" ref={ref} {...styles.title} {...rest} />
  )
})

NotificationTitle.displayName = 'NotificationTitle'
export default NotificationTitle
