<script>
	export let services;
	export let store;

	export let machineService;

	let childStore;

	$: if (services.core) {
		childStore = services.core.subscribeComposite('@learnready');
	}

	$: {
		if ($childStore && $childStore.machine.state) {
			console.log('learn color machine: ' + JSON.stringify(machineService));
			machineService.send($childStore.machine.state);
		}
	}
</script>

<div class="p-2 border-2 border-blue-500">
	I am the parent, this is my state: {$store.machine.state}
</div>
<div
	class="p-2 border-2"
	style="background-color: {$store.machine.state}; border-radius: 50%; width: 50px; height: 50px;"
/>
