<script lang="ts">
  let { size = 40, animate = false, color = '#E1306C' }: { size?: number; animate?: boolean; color?: string } = $props();
</script>
<svg width={size} height={size} viewBox="0 0 48 48" fill="none">
  {#if animate}
    <circle cx="20" cy="14" r="2.5" fill={color} opacity="0.5" class="ic-steam" style="--delay: 0s; --drift: 4px" />
    <circle cx="26" cy="12" r="2" fill={color} opacity="0.5" class="ic-steam" style="--delay: 0.6s; --drift: -4px" />
    <circle cx="23" cy="16" r="1.8" fill={color} opacity="0.4" class="ic-steam" style="--delay: 1.2s; --drift: 6px" />
  {/if}
  <ellipse cx="24" cy="20" rx="16" ry="3" fill="#3A2A40" />
  <rect x="22" y="14" width="4" height="5" rx="1.5" fill="#3A2A40" />
  <path d="M8 21 L10 38 Q10 42 14 42 L34 42 Q38 42 38 38 L40 21 Z" fill={color} />
  {#if animate}
    <circle cx="18" cy="32" r="1.5" fill="white" opacity="0.7" class="ic-bubble" style="animation-delay: 0.3s" />
    <circle cx="26" cy="34" r="1.2" fill="white" opacity="0.6" class="ic-bubble" style="animation-delay: 0.7s" />
    <circle cx="30" cy="32" r="1" fill="white" opacity="0.6" class="ic-bubble" style="animation-delay: 1.1s" />
  {/if}
  <rect x="4" y="24" width="6" height="3" rx="1.5" fill="#3A2A40" />
  <rect x="38" y="24" width="6" height="3" rx="1.5" fill="#3A2A40" />
</svg>
