import React from 'react'

import { useStyleConfig, vui } from '../core'
import { H4 } from '../heading'
import { cs } from '../utils'
import { useDialogContext } from './context'
import { DialogTitleProps } from './dialog.types'

/** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
export const DialogTitle = vui<'h4', DialogTitleProps>((props, ref) => {
  const { className, ...rest } = props
  const { titleId } = useDialogContext() ?? {}
  const styles = useStyleConfig('Dialog', useDialogContext())

  return <H4 className={cs('vui-dialogTitle', className)} id={titleId} ref={ref} {...styles.title} {...rest} />
})

DialogTitle.displayName = 'DialogTitle'
export default DialogTitle
