import { forwardRef } from 'react'
import { Box, styled, type BoxProps } from '@mui/material'
import type { ChatAgentMessageProps } from '../types'
import { styles } from './styles'

const InnerBox = ({ className, ...props }: BoxProps) => (
  <Box className={`PsChat--agent-message ${className ?? ''}`} {...props} />
)

const StyledAgentMessage = styled(InnerBox)(({ theme }) =>
  styles.agentMessageContainer(theme),
)

/**
 * Agent reply bubble. A styles container that positions the reply and its
 * composed pieces (text, loaders, tool traces, …); it renders `children`
 * verbatim and forwards its `ref` to the underlying element. For Markdown
 * replies, compose `ChatAgentMessageMarkdown` instead of teaching this
 * container about the markdown engine.
 */
export const ChatAgentMessage = forwardRef<
  HTMLDivElement,
  ChatAgentMessageProps
>(function ChatAgentMessage({ children, ...props }, ref) {
  return (
    <StyledAgentMessage ref={ref} {...props}>
      {children}
    </StyledAgentMessage>
  )
})
ChatAgentMessage.displayName = 'ChatAgentMessage'