import { FC } from 'react';

import { SxProps } from '@material-hu/mui/index';
import Typography, { TypographyProps } from '@material-hu/mui/Typography';

type RichTextProps = {
  text: string;
  color?: TypographyProps['color'];
  sx?: SxProps;
};

/**
 * @deprecated Use `HTMLBody` from `@material-hu/components/composed-components/HTMLBody` instead.
 */
const RichText: FC<RichTextProps> = ({ text, color, sx }: RichTextProps) => (
  <Typography
    sx={{
      mb: '8px',
      '& ul, & ol': {
        ml: 3,
        my: 1,
      },
      ...sx,
    }}
    variant="body2"
    color={color}
    dangerouslySetInnerHTML={{
      __html: text,
    }}
  />
);

export default RichText;