<script>
	const tech_table_lookup = (to_lookup, techTable) => {
		let tech_to_return = {
			tech_name: 'Not in table',
			tech_logo: '',
			project_site: '',
			skill_level: 0
		};
		// let tech_to_return = null; // Default value for tech_to_return

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

		if (tech_props.tech_name === 'Dioxus') {
			console.log(tech_props.tech_logo);
		}

		return tech_to_return;
	};

	let { tech_props, techTablePromise } = $props();
</script>

<a href={tech_props.project_site} class="tech-card">
	<img src={tech_props.tech_logo} alt={tech_props.tech_name + "'s logo"} />

	<h4>{tech_props.tech_name}</h4>
	<progress value={tech_props.skill_level} max="100"></progress>
</a>

<style>
	a {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		flex: 0 1 70px;
		text-decoration: none;
		color: inherit;
		padding: 0px 0.5svw;
		padding-top: 2svh;
		padding-bottom: 0.5svh;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
	}

	img {
		width: 32px;
		height: 32px;
		aspect-ratio: 1;
		object-fit: contain;
	}

	progress {
		width: 90%;
		margin-bottom: 0.5svh;
		overflow: hidden;
		appearance: none;
		border-radius: 999px;
		justify-self: flex-end;
		align-self: center;
	}

	h4 {
		margin: 1svh 0.5svw;
		width: 80px;
		text-align: center;
		font-weight: normal;
	}

	/* for chromium browsers */
	progress::-webkit-progress-value {
		background-color: steelblue;
		/* border-radius: 999px; */
	}

	/* for firefox browsers */
	progress::-moz-progress-bar {
		background-color: steelblue;
		/* border-radius: 999px; */
	}
</style>
