import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import Counter from 'remote/Counter'
import './index.css'
import { Counter as CounterComponentType } from 'shared-types'
import SvelteCounter from 'remoteSvelte/Counter'
import { StoreProvider } from 'store/store'

const CounterComp = Counter as CounterComponentType

const App = () => {
  useEffect(() => {
    new SvelteCounter({
      target: document.getElementById('svelteApp'),
    })
  }, [])

  return (
    <div className="container">
      <CounterComp initialValue={2} />

      <div id={'svelteApp'}></div>
    </div>
  )
}

ReactDOM.render(
  <StoreProvider>
    <App />
  </StoreProvider>,
  document.getElementById('app'),
)