<script lang="ts">
	import AddonCard from "$lib/components/AddonCard.svelte";
	import { GetAddons, IsGamePathValid } from "$wails/main/App";
	import { type main } from "$wails/models";

	let addons: { [key: string]: main.Addon } = {};
	GetAddons().then((res) => {
		if (res.error) {
			console.error(res.error);
		} else {
			addons = res.data;
		}
	});

	let gamePath = "";
	let gamePathValid = false;
	IsGamePathValid().then((res) => {
		if (res.error) {
			console.error(res.error);
		} else {
			gamePathValid = res.data;
		}
	});
</script>

<template>
	{#if gamePathValid}
		<div class="grid grid-cols-3 gap-4">
			{#each Object.values(addons) as addon}
				<AddonCard {addon} />
			{/each}
		</div>
	{:else}
		<div class="flex flex-col items-center justify-center h-full">
			<p class="text-gray-300">Game path is not valid</p>
			<button class="bg-blue-500 text-white p-2 my-2 rounded-lg">Set Game Path</button>
		</div>
	{/if}
</template>
