<script lang="ts">
	let {
		score
	}: {
		score: number;
	} = $props();

	let percentage = $derived(Math.round((score / 10) * 100));

	let description = $derived(
		score >= 9
			? { label: 'Ausgezeichnet', colorClass: 'text-[var(--green-dark)]' }
			: score >= 7
				? { label: 'Gut', colorClass: 'text-[var(--color-text)]' }
				: score >= 4
					? { label: 'Verbesserbar', colorClass: 'text-[var(--yellow-text)]' }
					: { label: 'Unzureichend', colorClass: 'text-[var(--color-error)]' }
	);
</script>

<div>
	<!-- Score number + out of 10 -->
	<div class="flex items-baseline gap-2">
		<span
			data-testid="score-value"
			class="font-[var(--font-display)] text-[56px] font-[300] leading-none text-[var(--color-text)] lg:text-[72px]"
		>
			{score}
		</span>
		<span
			data-testid="score-label"
			class="font-[var(--font-sans)] text-[16px] text-[var(--color-text-muted)]"
		>
			/ 10
		</span>
		<span
			data-testid="score-description"
			class="ml-1 font-[var(--font-sans)] text-[14px] font-medium {description.colorClass}"
		>
			{description.label}
		</span>
	</div>

	<!-- Progress bar -->
	<div class="mt-3 h-[6px] w-[120px] overflow-hidden rounded-full bg-[var(--color-border)] lg:w-[200px]">
		<div
			role="progressbar"
			aria-valuenow={score}
			aria-valuemin={0}
			aria-valuemax={10}
			aria-label="Abwechslungs-Score"
			class="h-full rounded-full bg-[var(--yellow)] transition-all"
			style="width: {percentage}%"
		></div>
	</div>
</div>
