import React from 'react'
import RenderHtml, { Node } from 'react-native-render-html'
import { isTag } from 'domutils'

import { colors } from '../Colors'

const allowList = ['h1', 'h2', 'p', 'br', 'b', 'i', 'em', 'strong']
const ignoreDomNode = (node: Node): boolean =>
  isTag(node) && !allowList.includes(node.name)

export const StyledHTML: React.FC<{ html: string; contentWidth: number }> = ({
  html,
  contentWidth,
}) => (
  <RenderHtml
    source={{ html }}
    contentWidth={contentWidth}
    tagsStyles={{
      h1: { color: colors.white },
      h2: { color: colors.white },
      p: { color: '#5e6c86' },
    }}
    ignoreDomNode={ignoreDomNode}
  />
)