import React from 'react'
import Vue from 'vue'

// v2r(VueComponent) => ReactComponent
export const v2r = Component => {
  return () => {
    const el = React.useRef(null)

    React.useEffect(() => {
      const app = new Vue({
        el: el.current,
        render: h => h(Component)
      })

      return () => app.$destroy()
    })

    return React.createElement('div', { ref: el })
  }
}