import React, { useEffect } from 'react'
import Prism from 'prismjs'
import 'prismjs/themes/prism-okaidia.css'

export default function PrismJsCode({
  code,
  language = 'javascript',
}: {
  code: React.ReactNode
  language?: string
}): React.JSX.Element {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  return (
    <div className='Code'>
      <pre>
        <code className={`language-${language}`}>{code}</code>
      </pre>
    </div>
  )
}