<script lang="ts">
	import RecipeHero from '$lib/recipes/RecipeHero.svelte';
	import IngredientList from '$lib/recipes/IngredientList.svelte';
	import StepList from '$lib/recipes/StepList.svelte';
	import type { RecipeDetail } from '$lib/recipes/types';

	let { data }: { data: { recipe: RecipeDetail } } = $props();
</script>

<svelte:head>
	<title>{data.recipe.name} — Mealplan</title>
</svelte:head>

<div>
	<div class="hidden md:flex items-center justify-end px-[24px] py-[12px] border-b border-[var(--color-border)]">
		<a
			href="/recipes/{data.recipe.id}/edit"
			class="border border-[var(--color-border)] text-[var(--color-text)] text-[13px] font-medium font-sans tracking-[0.04em] rounded-[var(--radius-md)] px-[16px] py-[8px]"
		>
			Bearbeiten
		</a>
	</div>

	<RecipeHero recipe={data.recipe} />

	<div class="md:flex">
		<div class="md:flex-1 md:border-r md:border-[var(--color-border)] p-[24px]">
			<IngredientList ingredients={data.recipe.ingredients} />
		</div>
		<div class="md:flex-1 p-[24px]">
			<StepList steps={data.recipe.steps} />
		</div>
	</div>
</div>
