<script lang="ts">
	import components from '$lib/components.ts';
	export let componentsData = [];

	async function getComponent(componentName) {
		if (components[componentName]) {
			const module = await components[componentName]();
			return module.default;
		}
		return null;
	}
</script>

<div class="grid h-full w-full" style="display: grid; {componentsData.layout || ''}">
	{#each componentsData.children as component (component.id)}
		{#await getComponent(component.componentName) then Component}
			{#if Component}
				<div class="w-full h-full overflow-hidden">
					<svelte:component
						this={Component}
						{...component.props}
						class=" h-full w-full {component.slot} "
					/>
				</div>
			{:else}
				<p>Component {component.componentName} not found.</p>
			{/if}
		{/await}
	{/each}
</div>
