<script lang="ts">
	import type { Ingredient } from './types';

	let { ingredients }: { ingredients: Ingredient[] } = $props();

	const sortedIngredients = $derived(
		[...ingredients].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
	);
</script>

<section>
	<h2
		class="text-[12px] font-medium font-sans tracking-[0.08em] uppercase text-[var(--color-text-muted)] mb-[16px]"
	>
		Zutaten
	</h2>

	<ul>
		{#each sortedIngredients as ingredient (ingredient.ingredientId ?? ingredient.name)}
			<li class="flex items-baseline gap-[12px] py-[8px] border-b border-[var(--color-border)] last:border-b-0">
				{#if ingredient.quantity != null}
					<span class="text-[13px] font-medium text-[var(--color-text)] w-[80px] shrink-0">
						{ingredient.quantity}{ingredient.unit != null ? ` ${ingredient.unit}` : ''}
					</span>
				{/if}
				<span class="text-[14px] text-[var(--color-text)]">{ingredient.name}</span>
			</li>
		{/each}
	</ul>
</section>
