import { useMUD } from './MUDContext'
import { useComponentValue } from '@latticexyz/react'

export const App = () => {
	const {
		components: { Counter },
		systemCalls: { increment },
		network: { singletonEntity },
	} = useMUD()

	const counter = useComponentValue(Counter, singletonEntity)

	return (
		<>
			<div>
				Counter: <span>{counter?.value ?? '??'}</span>
			</div>
			<button
				type='button'
				onClick={async (event) => {
					event.preventDefault()
					console.log('new counter value:', await increment())
				}}
			>
				Increment
			</button>
		</>
	)
}