<script>
	export let me;
	export let data;

	function toggle() {
		me.do.machine.send('TOGGLE');
	}
</script>

<div class="w-full h-full border-2 border-green-500">
	<p>My ID is: {me.id}</p>
	my state is {$data.state}
	<h1 class="h1">I am charly</h1>
	my data.context.hello prop: {JSON.stringify($data.context.hello)}
	<br />
	<button
		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
		on:click={toggle}
	>
		Toggle
	</button>
	<div class="p-8 overflow-scroll h-1/2">
		{#if $data.context.messages}
			{#each $data.context.messages as message}
				<p>{message.text}</p>
			{/each}
		{/if}
	</div>
</div>