<script lang="ts">
	interface IngredientOverlap {
		ingredientName?: string;
		days?: string[];
	}

	let {
		score,
		ingredientOverlaps = [],
		showReviewLink = false
	}: {
		score: number;
		ingredientOverlaps?: IngredientOverlap[];
		showReviewLink?: boolean;
	} = $props();

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

<div class="rounded-[var(--radius-lg)] border border-[var(--yellow-light)] bg-[var(--yellow-tint)] p-4">
	<div class="flex items-baseline gap-1">
		<span class="font-[var(--font-display)] text-[28px] font-[300] text-[var(--color-text)] md:text-[40px]">
			{score}
		</span>
		<span class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">/10</span>
		<span class="ml-1 font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">Abwechslungs-Score</span>
	</div>

	<!-- Progress bar -->
	<div
		class="mt-2 h-[4px] w-full overflow-hidden rounded-full bg-[var(--yellow-light)]"
	>
		<div
			role="progressbar"
			aria-valuenow={score}
			aria-valuemin={0}
			aria-valuemax={10}
			class="h-full rounded-full bg-[var(--yellow)] transition-all"
			style="width: {percentage}%"
		></div>
	</div>

	<!-- Ingredient overlap warnings -->
	{#if ingredientOverlaps.length > 0}
		<ul class="mt-3 space-y-1">
			{#each ingredientOverlaps as overlap}
				<li class="font-[var(--font-sans)] text-[12px] text-[var(--yellow-text)]">
					⚠ <span>{overlap.ingredientName}</span> in <span>{overlap.days?.length ?? 0} Mahlzeiten</span>
				</li>
			{/each}
		</ul>
	{/if}

	{#if showReviewLink}
		<a
			href="/planner/variety"
			class="mt-3 block font-[var(--font-sans)] text-[12px] font-medium text-[var(--yellow-text)] hover:underline"
		>
			Variety überprüfen →
		</a>
	{/if}
</div>
