<script>
	import TechCard from './techCard.svelte';

	let { cat, tech_vec, techTablePromise } = $props();
	const tech_table_lookup = (to_lookup, tableTech) => {
		let tech_to_return = {
			tech_name: 'Not in table',
			tech_logo: '',
			project_site: '',
			skill_level: 0
		};

		for (let tech of tableTech) {
			if (tech.tech_name === to_lookup) {
				tech_to_return = tech;
				break; // Optional: stop the loop once the match is found
			}
		}

		return tech_to_return;
	};
</script>

<div class="tech-cat">
	<h3>{cat}</h3>
	<div class="tech-row">
		{#await techTablePromise}
			<p>Loading...</p>
		{:then techTable}
			{#if techTable != null}
				{#each tech_vec as tech, techIndex}
					<TechCard
						tech_props={tech_table_lookup(tech, techTable)}
						{techTablePromise}
						key={tech + techIndex}
					/>
				{/each}
			{:else}
				<p>An Error has occurred or loading slowly</p>
			{/if}
		{/await}
	</div>
</div>

<style>
	:root {
		--tech-gap: 4svw;
	}

	h3 {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		display: flex;
		margin: 2svh 2svw;
		padding: 0svh 2svw;
		padding-bottom: 1svh;
	}

	.tech-cat {
		padding: 0px 1svw;
		padding-bottom: 2svh;
		margin-bottom: 3svh;
		flex: 1 1 auto;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
	}

	.tech-row {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		row-gap: 1svh;
	}
</style>
