import { lazy, Suspense } from 'react'
import Box from '@mui/material/Box'
import CircularProgress from '@mui/material/CircularProgress'

const RichTextMessageContentImpl = lazy(() =>
  import('./RichTextMessageContent').then((m) => ({ default: m.RichTextMessageContent })),
)

type RichTextMessageContentProps = {
  value: string
  tone?: 'default' | 'review' | 'chat'
}

export function RichTextMessageContent(props: RichTextMessageContentProps) {
  return (
    <Suspense
      fallback={
        <Box sx={{ display: 'flex', justifyContent: 'center', p: 1 }}>
          <CircularProgress size={16} />
        </Box>
      }
    >
      <RichTextMessageContentImpl {...props} />
    </Suspense>
  )
}