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

type Author = 'admin' | 'user'

type Props = {
  authorType: Author
  avatar?: ReactNode
  children: ReactNode
}

export function ChatMessageBubble({ authorType, avatar, children }: Props) {
  const isAdmin = authorType === 'admin'
  return (
    <Stack
      direction="row"
      spacing={1}
      sx={{
        alignSelf: isAdmin ? 'flex-start' : 'flex-end',
        maxWidth: '85%',
        alignItems: 'flex-end',
      }}
    >
      {isAdmin && avatar && <Box sx={{ flexShrink: 0, pb: 0.5 }}>{avatar}</Box>}
      <Box
        sx={{
          p: 1.25,
          borderRadius: 2,
          border: 1,
          borderColor: 'divider',
          width: 'fit-content',
          color: 'text.primary',
          bgcolor: (theme) =>
            isAdmin
              ? 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>
      {!isAdmin && avatar && <Box sx={{ flexShrink: 0, pb: 0.5 }}>{avatar}</Box>}
    </Stack>
  )
}