<script lang="ts">
	let {
		easy,
		medium,
		hard
	}: {
		easy: number;
		medium: number;
		hard: number;
	} = $props();


</script>

<!-- Labels below the bar -->
<div class="space-y-2">
	<!-- Bar segments -->
	<div class="flex h-[10px] overflow-hidden rounded-full">
		{#if easy > 0}
			<div
				class="h-full bg-[var(--green)]"
				style="flex: {easy}"
			></div>
		{/if}
		{#if medium > 0}
			<div
				class="h-full bg-[var(--yellow)]"
				style="flex: {medium}"
			></div>
		{/if}
		{#if hard > 0}
			<div
				class="h-full bg-[var(--color-error)]"
				style="flex: {hard}"
			></div>
		{/if}
	</div>

	<!-- Labels -->
	<div class="flex gap-4">
		{#if easy > 0}
			<span
				data-testid="effort-easy"
				class="font-[var(--font-sans)] text-[12px] text-[var(--green-dark)]"
			>
				Einfach ×{easy}
			</span>
		{/if}
		{#if medium > 0}
			<span
				data-testid="effort-medium"
				class="font-[var(--font-sans)] text-[12px] text-[var(--yellow-text)]"
			>
				Mittel ×{medium}
			</span>
		{/if}
		{#if hard > 0}
			<span
				data-testid="effort-hard"
				class="font-[var(--font-sans)] text-[12px] text-[var(--color-error)]"
			>
				Aufwändig ×{hard}
			</span>
		{/if}
	</div>
</div>
