<script lang="ts">
	import AppWidget from './AppWidget.svelte';
	import WidgetContainer from './WidgetContainer.svelte';

	interface WidgetData {
		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 Props {
		widgets: WidgetData[];
	}

	let { widgets }: Props = $props();
</script>

{#if widgets.length === 0}
	<p class="text-sm text-muted-foreground">No widgets in this section.</p>
{:else}
	<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
		{#each widgets as widget (widget.id)}
			<WidgetContainer>
				{#if widget.type === 'app' && widget.app}
					<AppWidget app={widget.app} />
				{:else}
					<div class="flex h-full items-center justify-center rounded-xl border border-border bg-card p-4">
						<span class="text-xs text-muted-foreground">{widget.type} widget</span>
					</div>
				{/if}
			</WidgetContainer>
		{/each}
	</div>
{/if}
