<script>
	/**
	 * @typedef {import('$lib/models/root.js').Root} Root
	 * @typedef {import('$lib/services/objectParser.js').TypedObject} TypedObject
	 */

	import { objectsStore } from '$lib/stores/objects.js';
	import ObjectRenderer from './ObjectRenderer.svelte';

	/** @type {{ object: Root, depth?: number }} */
	let { object, depth = 0 } = $props();

	/** @type {TypedObject | undefined} */
	let childObject = $derived(undefined);
</script>

<section class="root">
	{#if depth === 0}
		<h2>Root</h2>
	{/if}

	{#each object.childIds as childId (childId)}
		{@const childObject = $objectsStore.objects.get(childId)}
		{#if childObject}
			<ObjectRenderer object={childObject} depth={depth + 1} />
		{/if}
	{/each}
</section>

<style>
	.root {
		margin: 0.5rem 0;
	}
</style>
