<script>
	export let me;
	export let data;

	const handleButton = () => {
		if (me && me.do && me.do.machine) {
			me.do.machine.send('TOGGLE');
		}
	};
</script>

<div class="border-2 border-yellow-500">
	<p>My ID is: {me.id}</p>

	i am the child and this is my state: {$data.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>
