import React, { useState, useEffect, memo } from 'react'
import twemoji from 'twemoji'

const Twemoji = ({ emoji }) => {
  const [emojiHtml, setEmojiHtml] = useState(emoji)
  useEffect(() => {
    setEmojiHtml(
      twemoji.parse(emojiHtml, {
        folder: 'svg',
        ext: '.svg'
      })
    )
  }, [emoji])
  return <span dangerouslySetInnerHTML={{ __html: emojiHtml }} />
}

export default memo(Twemoji)