import React, { useEffect, useState } from 'react'
import { PluginElementContext } from '@burner-wallet/types'
import MyPlugin from '../MyPlugin'

const MyElement: React.FC<PluginElementContext> = ({ plugin }) => {
  const [block, setBlock] = useState<string | null>(null)
  const _plugin = plugin as MyPlugin

  useEffect(() => {
    _plugin.getBlockNum().then((num: number) => setBlock(num.toString()))
  }, [])

  return (
    <div>
      <div>Injected plugin element</div>
      {block && <div>Current block number: {block}</div>}
    </div>
  )
}

export default MyElement