import { useStyleConfig, vui } from '../core'
import { Icon } from '../icon'
import { cs } from '../utils'
import { dialogStatusMapping } from './consts'
import { useDialogContext } from './context'
import { DialogIconProps } from './dialog.types'

/** Shows an icon based on a given status. Optionally, can be a custom icon. */
export const DialogIcon = vui<'svg', DialogIconProps>((props, ref) => {
  const { className, ...rest } = props
  const { status = '' } = useDialogContext() ?? {}
  const styles = useStyleConfig('Dialog', useDialogContext())
  const { iconProps } = dialogStatusMapping[status] ?? {}

  return <Icon className={cs('vui-dialogIcon', className)} mr={2} ref={ref} {...styles.icon} {...iconProps} {...rest} />
})

DialogIcon.displayName = 'DialogIcon'

export default DialogIcon
