import { Avatar } from '../avatar'
import { Box } from '../box'
import { styled, useStyleConfig, vui } from '../core'
import { Icon } from '../icon'
import { cs } from '../utils'
import { avatarStyles, 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 { avatar, children, className, text, size = 'md', variant = 'info', ...rest } = props
  const styles = useStyleConfig('Message', props)

  return (
    <MessageBase className={cs('vui-message', className)} ref={ref} {...styles} {...rest}>
      <>
        {avatar ? (
          <Avatar mr="16px" {...avatar} />
        ) : (
          <Icon mr={`${spacingDictionary[size]}px`} name={iconDictionary[variant]} size={styles.iconSize} />
        )}
        <Box size={styles.fontSize} w="100%" {...(avatar ? avatarStyles : undefined)}>
          {children ?? text}
        </Box>
      </>
    </MessageBase>
  )
})

Message.displayName = 'Message'

export default Message
