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

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

type RichTextMessageEditorProps = {
  value: string
  onChange: (next: string) => void
  placeholder?: string
  disabled?: boolean
}

export function RichTextMessageEditor(props: RichTextMessageEditorProps) {
  return (
    <Suspense
      fallback={
        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>
          <CircularProgress size={20} />
        </Box>
      }
    >
      <RichTextMessageEditorImpl {...props} />
    </Suspense>
  )
}
