<script lang="ts">
	// Deterministic 2-color gradient thumbnail from a string id.
	const PALETTE = ['#E1306C', '#FD7E14', '#FCAF45', '#833AB4', '#C13584'];

	function strHash(s: string): number {
		let h = 0;
		for (let i = 0; i < s.length; i++) h = (Math.imul(31, h) + s.charCodeAt(i)) | 0;
		return Math.abs(h);
	}

	interface Props {
		id: string;
		size?: number;
		emoji?: string;
	}
	let { id, size = 52, emoji }: Props = $props();

	const swatch = $derived.by(() => {
		const h = strHash(id);
		const a = PALETTE[h % PALETTE.length];
		const b = PALETTE[(h + 2) % PALETTE.length];
		return [a, b] as [string, string];
	});
</script>

<div class="recipe-thumb" style="width:{size}px; height:{size}px;">
	<div
		class="gradient"
		style="background: linear-gradient(135deg, {swatch[0]}, {swatch[1]});"
	>
		<div class="ring outer"></div>
		<div class="ring inner"></div>
		{#if emoji}
			<span class="emoji" style="font-size:{size * 0.38}px">{emoji}</span>
		{:else}
			<svg class="fork" width={size * 0.42} height={size * 0.42} viewBox="0 0 24 24" fill="none">
				<path
					d="M9 3v6a3 3 0 01-3 3h0a3 3 0 01-3-3V3M6 12v9M15 3v3a3 3 0 003 3h0v9"
					stroke="rgba(255,255,255,0.8)"
					stroke-width="2"
					stroke-linecap="round"
				/>
			</svg>
		{/if}
	</div>
</div>

<style>
	.recipe-thumb {
		flex-shrink: 0;
		border-radius: 14px;
		overflow: hidden;
	}
	.gradient {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ring {
		position: absolute;
		border-radius: 50%;
		border: 1.5px solid rgba(255, 255, 255, 0.25);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.outer {
		width: 90%;
		height: 90%;
	}
	.inner {
		width: 68%;
		height: 68%;
	}
	.emoji {
		position: relative;
		z-index: 1;
	}
	.fork {
		position: relative;
		z-index: 1;
	}
</style>
