<script lang="ts">
	import { formatDayAbbr } from '$lib/planner/week';

	interface Slot {
		slotDate?: string;
		recipe?: {
			id?: string;
			name?: string;
		};
	}

	interface Props {
		slots: Slot[];
		filteredStaplesCount: number;
	}

	let { slots, filteredStaplesCount }: Props = $props();

	let filledSlots = $derived(slots.filter((s) => s.recipe));
</script>

<aside class="flex flex-col gap-4">
	<div>
		<h2 class="font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
			Rezepte dieser Woche
		</h2>
		<div class="mt-2 space-y-1.5">
			{#each filledSlots as slot}
				<a
					href="/recipes/{slot.recipe?.id}"
					class="flex items-center gap-2 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-2 hover:border-[var(--green-light)]"
				>
					<span class="min-w-[28px] font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">
						{slot.slotDate ? formatDayAbbr(slot.slotDate, 'short') : ''}
					</span>
					<span class="flex-1 truncate font-[var(--font-sans)] text-[13px] font-medium text-[var(--color-text)]">
						{slot.recipe?.name}
					</span>
				</a>
			{/each}
			{#if filledSlots.length === 0}
				<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">
					Keine Gerichte geplant.
				</p>
			{/if}
		</div>
	</div>

	{#if filteredStaplesCount > 0}
		<div class="rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-page)] px-3 py-2">
			<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">
				{filteredStaplesCount} Grundzutaten automatisch ausgeblendet
			</p>
			<a
				href="/pantry"
				class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] hover:underline"
			>
				Vorrat bearbeiten
			</a>
		</div>
	{/if}
</aside>
