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

	let { recipe, compact = false, onplan }: {
		recipe: RecipeSummary;
		compact?: boolean;
		onplan?: ((recipeId: string, recipeName: string) => void);
	} = $props();

	let metadata = $derived(
		[
			recipe.cookTimeMin != null ? `${recipe.cookTimeMin} Min` : null,
			recipe.effort ?? null
		]
			.filter(Boolean)
			.join(' · ')
	);
</script>

<div class="rounded-[var(--radius-md)] overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] hover:shadow-[var(--shadow-card)]">
	<a href="/recipes/{recipe.id}" class="block">
		<div
			data-testid="image-area"
			class="w-full overflow-hidden {compact ? 'h-[64px]' : 'h-[100px]'}"
		>
			{#if recipe.heroImagePreview}
				<img src={recipe.heroImagePreview} alt={recipe.name} class="w-full h-full object-cover" />
			{:else}
				<div
					data-testid="image-placeholder"
					class="w-full h-full bg-[var(--color-border)] flex items-center justify-center"
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="24"
						height="24"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="1.5"
						stroke-linecap="round"
						stroke-linejoin="round"
						aria-hidden="true"
						class="text-[var(--color-text-muted)] opacity-50"
					>
						<!-- plate -->
						<circle cx="12" cy="13" r="6" />
						<path d="M12 7V5" />
						<!-- fork tines -->
						<path d="M8 3v3c0 1.1.9 2 2 2h4" />
					</svg>
				</div>
			{/if}
		</div>

		<div class="px-2 py-1.5">
			<p class="font-medium text-[13px] text-[var(--color-text)] truncate">{recipe.name}</p>
			{#if metadata}
				<p class="text-[12px] text-[var(--color-text-muted)]">{metadata}</p>
			{/if}
		</div>
	</a>

	{#if onplan}
		<div class="flex gap-[5px] px-2 pb-2">
			<a
				href="/cook/{recipe.id}"
				class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green)] text-white"
			>🍳 Jetzt kochen</a>
			<button
				type="button"
				onclick={() => onplan!(recipe.id, recipe.name)}
				class="flex-1 text-center font-[var(--font-sans)] text-[10px] font-[500] py-[5px] px-[6px] rounded-[var(--radius-md)] bg-[var(--green-tint)] text-[var(--green-dark)] border border-[var(--green-light)]"
			>📅 Zur Woche +</button>
		</div>
	{/if}
</div>
