import React from "react"
import { createStore } from "@bytesoftio/store"
import { useStore } from "@bytesoftio/use-store"

const globalStore = createStore({count: 0})

const Component = () => {
  // create a new store from initial state, returns a state object and 
  // the actual store that has been connected to React
  const store1 = useStore(() => ({count: 0}))

  // create a new store through an initializer / factory function
  const store2 = useStore(globalStore) 
  
  const increment = () => store1.set({ count: store1.count + 1 })
  const incrementGlobal = () => store2.set({ count: store2.count + 1 })
 
  return (
    <div>
      <button onClick={increment}>local count: {store1.get().count}</button>    
      <button onClick={incrementGlobal}>global count: {store2.get().count}</button>    
    </div>
  )
}