<script lang="ts">
	import type { Component } from 'svelte';
	import type { PageConfig } from '$lib/types/pages';
	import { getGridColumns } from '$lib/types/pages';
	import { blockRegistry } from '$lib/blocks/registry';
	import BlockShell from './BlockShell.svelte';

	let { page }: { page: PageConfig } = $props();

	let resolved = $state<Record<string, Component>>({});

	$effect(() => {
		for (const block of page.blocks) {
			const meta = blockRegistry[block.type];
			if (meta && !resolved[block.id]) {
				meta.component().then((m) => {
					resolved[block.id] = m.default;
				});
			}
		}
	});

	let gridColumns = $derived(getGridColumns(page.layout));
</script>

<div class="page-grid" style:grid-template-columns={gridColumns}>
	{#each page.blocks as block (block.id)}
		<BlockShell title={block.title}>
			{@const BlockComponent = resolved[block.id]}
			{#if BlockComponent}
				<BlockComponent props={block.props ?? {}} />
			{:else}
				<div class="loading">Laster...</div>
			{/if}
		</BlockShell>
	{/each}
</div>

<style>
	.page-grid {
		display: grid;
		gap: 1rem;
		height: calc(100vh - 48px - 3rem);
	}

	@media (max-width: 768px) {
		.page-grid {
			grid-template-columns: 1fr !important;
			height: auto;
		}
	}

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: #8b92a5;
		font-size: 0.85rem;
	}
</style>
