import React from 'react'

import { Box } from '../box'
import { styled, useStyleConfig, vui } from '../core'
import { Icon } from '../icon'
import { T } from '../t'
import { cs } from '../utils'
import { iconDictionary, spacingDictionary } from './consts'
import { MessageProps } from './message.types'

export const MessageBase = styled.divBox`
  transition-duration: fast;
`

/** Displays a simple message text. */
export const Message = vui<'span', MessageProps>((props, ref) => {
  const { children, className, text, size = 'lg', variant = 'info', ...rest } = props
  const styles = useStyleConfig('Message', props)

  return (
    <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>
      <Box>
        <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.fontSize} />
        <T size={styles.fontSize}>{children ?? text}</T>
      </Box>
    </MessageBase>
  )
})

Message.displayName = 'Message'

export default Message
