import type { ReactNode } from 'react'
import Box from '@mui/material/Box'
import { alpha } from '@mui/material/styles'

type Author = 'admin' | 'user'

export function ChatMessageBubble(props: { authorType: Author; children: ReactNode }) {
  const { authorType, children } = props
  return (
    <Box
      sx={{
        p: 1.25,
        borderRadius: 2,
        border: 1,
        borderColor: 'divider',
        alignSelf: authorType === 'admin' ? 'flex-start' : 'flex-end',
        width: 'fit-content',
        maxWidth: '85%',
        color: 'text.primary',
        bgcolor: (theme) =>
          authorType === 'admin'
            ? alpha(theme.palette.grey[500], theme.palette.mode === 'dark' ? 0.28 : 0.14)
            : alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.28 : 0.1),
      }}
    >
      {children}
    </Box>
  )
}