<script lang="ts">
	import { snackProduct } from "./snacks.svelte";
	import type { StoreEntity } from "./+page.server.ts";

	let { data } = $props();

	function groupByCategory(products: Record<string, StoreEntity>) {
		const groups: Map<string, string[]> = new Map();
		for (const [key, product] of Object.entries(products)) {
			const cat = product.category;
			if (!groups.has(cat)) {
				groups.set(cat, []);
			}
			groups.get(cat)!.push(key);
		}
		return groups;
	}

	const categorized = groupByCategory(data.catalog);
</script>

<svelte:head>
	<title>Doloro Website [Store]</title>
</svelte:head>

{#each Array.from(categorized.entries()) as [category, products]}
	<section class="StoreCategory">
		<h2 class="StoreCategoryTitle">{category}</h2>
		<div class="SnackCatagoryContainer">
			{#each products as key}
				{@render snackProduct(data.catalog[key], key)}
			{/each}
		</div>
	</section>
{/each}
