import { IRichText } from './RichText.interface';
import React from 'react';
import { StyledRichText } from './RichText.theme';
import { typographyTags } from '../Heading/Heading.interface';
import xss from 'xss';

const RichText = ({
  id,
  tag = 'div',
  attributes,
  className,
  style,
  children,
  ...props
}: IRichText) => {
  return (
    <StyledRichText
      id={id}
      as={typographyTags[tag]}
      className={className}
      style={style}
      dangerouslySetInnerHTML={{
        __html: xss(children, {
          stripIgnoreTagBody: ['script']
        })
      }}
    />
  )
}

export default RichText