<script lang="ts">
	export interface INumberStatList {
		name: string;
		value: string;
		icon: string;
		color: string;
	}

	const { statsList = [] }: { statsList?: INumberStatList[] } = $props();
</script>

<section class="numberStatList">
	{#each statsList as stat}
		<div class="card">
			<img src={stat.icon} alt="" class="stat-icon" />
			<span class="stat-name">{stat.name}</span>
			<span class="stat-value" style:color={stat.color}>{stat.value}</span>
		</div>
	{/each}
</section>

<style>
	.numberStatList {
		color: white;
		display: flex;
		width: 100%;
		align-items: stretch;
		justify-content: stretch;
	}

	.numberStatList :global(.card) {
		flex: 1;
		display: grid;
		grid-template-areas: 'icon name' 'icon amount';
		align-items: center;
		justify-content: space-around;
	}

	.stat-icon {
		width: 24px;
		height: 24px;
		grid-area: icon;
	}

	.stat-name {
		grid-area: name;
		font-weight: bold;
	}

	.stat-value {
		grid-area: amount;
		font-size: 1.2em;
		font-weight: bold;
	}
</style>
