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

import { colors } from '../Colors'

const allowList = ['h1', 'h2', 'p', 'br', 'b', 'i', 'em', 'strong']

const ignoreDomNode = (node: Node): boolean =>
  isDomElement(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.midWhite },
      h2: { color: colors.midWhite },
      p: { color: colors.metals.metal0 },
    }}
    ignoreDomNode={ignoreDomNode}
  />
)