<script lang="ts">
	import FilterChipRow from '$lib/recipes/FilterChipRow.svelte';
	import RecipeGrid from '$lib/recipes/RecipeGrid.svelte';
	import type { RecipeSummary } from '$lib/recipes/types';

	let { data }: { data: { recipes: RecipeSummary[] } } = $props();

	let searchQuery = $state('');
	let activeFilter = $state('Alle');

	const effortMap: Record<string, string> = {
		Leicht: 'easy',
		Mittel: 'medium',
		Schwer: 'hard'
	};

	let filteredRecipes = $derived(
		data.recipes
			.filter((r) => {
				if (activeFilter === 'Alle') return true;
				return r.effort === effortMap[activeFilter];
			})
			.filter((r) => r.name.toLowerCase().includes(searchQuery.toLowerCase()))
	);
</script>

<svelte:head>
	<title>Rezepte — Mealplan</title>
</svelte:head>

<div class="p-6 space-y-4">
	<div class="flex items-center justify-between">
		<h1 class="font-[var(--font-display)] text-[28px] font-medium text-[var(--color-text)]">Rezepte</h1>
		<a href="/recipes/new" class="font-sans text-[13px] font-medium tracking-[0.04em] rounded-[var(--radius-md)] bg-[var(--green-dark)] px-[24px] py-[12px] text-white">Rezept hinzufügen</a>
	</div>

	<input
		type="search"
		placeholder="Suchen…"
		class="input"
		bind:value={searchQuery}
	/>

	<FilterChipRow {activeFilter} onFilter={(f) => (activeFilter = f)} />

	<RecipeGrid recipes={filteredRecipes} />
</div>
