<script>
	export let store;
	export let services;
	export let machineService;

	const handleButton = () => {
		console.log('learn ready machine: ' + JSON.stringify(machineService));
		console.log('Sending TOGGLE event to the machine');
		machineService.send('TOGGLE');
	};
</script>

<div class="border-2 border-yellow-500">
	i am the child and this is my state: {$store.machine.state}
	<button
		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
		on:click={handleButton}>Switch</button
	>
</div>
