import { Box } from '@mui/material'
import type { ChatUserMessageProps } from '../types'
import { ChatMessageOverflow, styles } from './styles'

export function ChatUserMessage({
  children,
  muted = false,
  topContext,
  sx,
}: ChatUserMessageProps) {
  return (
    <Box className='PsChat--user-message' sx={styles.userMessageContainer}>
      {topContext && <Box sx={styles.userMessageTop}>{topContext}</Box>}
      <ChatMessageOverflow
        className='PsChat--user-message-inner'
        variant='body2'
        sx={{
          ...styles.userMessage,
          ...(muted ? styles.muted : undefined),
          ...sx,
        }}
      >
        {children}
      </ChatMessageOverflow>
    </Box>
  )
}