<script lang="ts">
	import { t } from 'svelte-i18n';
	import Section from '$lib/components/section/Section.svelte';

	interface SectionData {
		id: string;
		title: string;
		icon: string | null;
		order: number;
		isExpandedByDefault: boolean;
		widgets: Array<{
			id: string;
			type: string;
			order: number;
			config: string;
			appId: string | null;
			app: {
				id: string;
				name: string;
				url: string;
				icon: string | null;
				iconType: string;
				description: string | null;
				statuses: Array<{ status: string; responseTime: number | null }>;
			} | null;
		}>;
	}

	interface AppData {
		id: string;
		name: string;
		url: string;
		icon: string | null;
		iconType: string;
		description: string | null;
		statuses: Array<{ status: string; responseTime: number | null }>;
	}

	interface Props {
		sections: SectionData[];
		allApps?: AppData[];
	}

	let { sections, allApps = [] }: Props = $props();
</script>

<div class="space-y-6">
	{#if sections.length === 0}
		<div class="rounded-xl border border-border bg-card/50 p-12 text-center">
			<p class="text-muted-foreground">{$t('board.no_sections')}</p>
		</div>
	{:else}
		{#each sections as section (section.id)}
			<Section {section} {allApps} />
		{/each}
	{/if}
</div>
