<script lang="ts">
	import aiIcon from '$icons/ai.svg?url';
	import compareIcon from '$icons/compare.svg?url';
	import dictionaryIcon from '$icons/dictionary.svg?url';
	import mapIcon from '$icons/map.svg?url';
	import searchIcon from '$icons/search.svg?url';
	import statsIcon from '$icons/stats.svg?url';
	import IconList from '$lib/components/data/IconList.svelte';
	import type { IconListDocument } from '$lib/components/data/types';

	interface Props {
		data?: { iconList?: IconListDocument };
		preview?: boolean;
	}

	let { data = {}, preview = false }: Props = $props();
	let iconList = $derived(data.iconList);
	const previewIcons = [
		searchIcon,
		compareIcon,
		statsIcon,
		mapIcon,
		dictionaryIcon,
		aiIcon
	];
</script>

{#if preview}
	<div
		class="grid h-full w-full grid-cols-3 place-items-center gap-1.5 bg-white p-2 dark:bg-steel-850"
		aria-label="Selection of tool.io icons"
		role="img"
	>
		{#each previewIcons as source}
			<span
				class="flex size-8 items-center justify-center rounded-lg bg-steel-100 text-steel-800 dark:bg-steel-700"
			>
				<img
					class="size-5 dark:invert"
					src={source}
					alt=""
					aria-hidden="true"
				/>
			</span>
		{/each}
	</div>
{:else if iconList}
	<IconList document={iconList} />
{:else}
	<p class="p-4 text-sm text-red-700 dark:text-red-300" role="alert">
		The icon gallery could not be loaded.
	</p>
{/if}