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

	let { steps }: { steps: Step[] } = $props();

	const sortedSteps = $derived(
		[...steps].sort((a, b) => (a.stepNumber ?? 0) - (b.stepNumber ?? 0))
	);
</script>

<section>
	<h2
		class="text-[12px] font-medium font-sans tracking-[0.08em] uppercase text-[var(--color-text-muted)] mb-[16px]"
	>
		Zubereitung
	</h2>
	<ol>
		{#each sortedSteps as step (step.stepNumber)}
			<li class="flex gap-[16px] items-start mb-[20px]">
				<div
					data-testid="step-circle"
					aria-hidden="true"
					class="w-[28px] h-[28px] rounded-full bg-[var(--green-dark)] text-white flex items-center justify-center shrink-0 font-sans text-[13px] font-medium"
				>
					{step.stepNumber}
				</div>
				<p class="text-[14px] text-[var(--color-text)] leading-[1.6] pt-[4px]">
					{step.instruction}
				</p>
			</li>
		{/each}
	</ol>
</section>
