<script lang="ts">
	interface Props {
		size?: number;
		phase?: 'prepping' | 'simmering' | 'plating';
		animate?: boolean;
	}
	let { size = 80, phase = 'simmering', animate = true }: Props = $props();

	const steamCount = 3;
</script>

<div class="pot-wrap" style="width:{size}px; height:{size}px;">
	<!-- Steam puffs -->
	{#if animate && (phase === 'prepping' || phase === 'simmering')}
		{#each { length: steamCount } as _, i}
			<div
				class="steam"
				style="
					left: {30 + i * 15}%;
					animation-delay: {i * 0.45}s;
					--drift: {(i - 1) * 5}px;
				"
			></div>
		{/each}
	{/if}

	<!-- Pot SVG -->
	<svg width={size} height={size} viewBox="0 0 80 80" fill="none">
		<!-- Lid -->
		<rect x="22" y="24" width="36" height="5" rx="2.5" fill="#3A2A40" />
		<!-- Handle -->
		<rect x="36" y="15" width="8" height="9" rx="3" fill="#3A2A40" />
		<!-- Body -->
		<path
			d="M14 30 L16 58 Q16 66 24 66 L56 66 Q64 66 64 58 L66 30 Z"
			fill={phase === 'prepping' ? '#FD7E14' : phase === 'simmering' ? '#E1306C' : '#833AB4'}
		/>
		<!-- Side handles -->
		<rect x="8" y="34" width="10" height="6" rx="3" fill="#3A2A40" />
		<rect x="62" y="34" width="10" height="6" rx="3" fill="#3A2A40" />
		<!-- Bubbles (simmering/plating) -->
		{#if animate && phase !== 'prepping'}
			<circle cx="30" cy="52" r="3" fill="white" opacity="0.5" class="ic-bubble" />
			<circle cx="42" cy="54" r="2.5" fill="white" opacity="0.45" class="ic-bubble" style="animation-delay:0.4s" />
			<circle cx="52" cy="50" r="2" fill="white" opacity="0.4" class="ic-bubble" style="animation-delay:0.8s" />
		{/if}
	</svg>
</div>

<style>
	.pot-wrap {
		position: relative;
		display: flex;
		align-items: flex-end;
	}
	.steam {
		position: absolute;
		bottom: 60%;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.55);
		animation: ic-steam 1.8s ease-in infinite;
		animation-delay: var(--delay, 0s);
	}
	@keyframes ic-steam {
		0% {
			opacity: 0.7;
			transform: translateY(0) translateX(0) scale(1);
		}
		100% {
			opacity: 0;
			transform: translateY(-22px) translateX(var(--drift, 0px)) scale(1.5);
		}
	}
</style>
