<svelte:options runes={true} />

<script lang="ts">
	import ServiceCard from '$lib/components/ServiceCard.svelte';
	import type { Service } from '$lib/types/data-types';

	let services: readonly Service[] = $state.frozen([]);

	let icons: readonly string[] = $state.frozen([]);

	async function get(url: string): Promise<any> {
		let res = await fetch(url)
		if (res.ok) {
			let data = await res.json()
			return data
		}
		else {
			return Promise.reject()
		}
	}

	$effect(() => {
		get("/data/services").then((data: Service[]) => {
			services = data
		})
	})

	$effect(() => {
		get("/assets/icons").then((data: string[]) => {
			icons = data
		})
	})
</script>

<svelte:head>
	<title>Services</title>
	<meta name="description" content="Overview of Services running on neshweb.net" />
</svelte:head>

<div class="flex h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
	{#each services as service}
		<Card {service} />
	{/each}
</div>