import { AvatarProps } from '../avatar'
import { useStyleConfig, vui } from '../core'
import Message, { MessageProps } from '../message'
import { cs } from '../utils'

const defaultAvatar: AvatarProps = {
  variant: 'solidDarkBlue',
  icon: 'cubVeracity',
}

/**
 * Displays a chat interface with messages and actions.
 */
export const ChatMessage = vui<'div', MessageProps>((props, ref) => {
  const styles = useStyleConfig('Chat', props)
  const { avatar = defaultAvatar, ...rest } = props

  return (
    <Message
      avatar={avatar}
      className={cs('vui-chat-message')}
      h="100%"
      my="16px"
      ref={ref}
      {...styles?.message}
      {...rest}
    />
  )
})

ChatMessage.displayName = 'ChatMessage'
export default ChatMessage
