import React, { useEffect } from 'react'
import mermaid from 'mermaid'

mermaid.initialize({
  startOnLoad: true,
  sequence: { showSequenceNumbers: true },
  theme: 'base',
  themeVariables: {
    textColor: 'rgb(0,0,0)',
    primaryBorderColor: 'rgb(87,87,87)',
    lineColor: 'rgb(87,87,87)',
    mainBkg: 'rgb(255,200,25)',
    sequenceNumberColor: 'rgb(255,255,255)',
  }
})

const Mermaid = ({ children }) => {
  useEffect(() => {
    mermaid.contentLoaded()
  }, [])
  return (
    <div>
      <div className="mermaid">{children}</div>
    </div>
  )
}

export default Mermaid