<script lang="ts">
  let { size = 40, animate = false, color = '#833AB4' }: { size?: number; animate?: boolean; color?: string } = $props();
</script>
<svg width={size} height={size} viewBox="0 0 48 48" fill="none">
  <ellipse cx="24" cy="34" rx="18" ry="5" fill={color} opacity="0.2" />
  <ellipse cx="24" cy="32" rx="18" ry="5" fill={color} />
  <ellipse cx="24" cy="31" rx="14" ry="3" fill="white" opacity="0.5" />
  <circle cx="20" cy="30" r="3.5" fill="#FCAF45" />
  <circle cx="26" cy="29" r="3" fill="#FD7E14" />
  <circle cx="28" cy="32" r="2.5" fill="#E1306C" />
  <path d="M18 18 Q14 12 18 9 Q22 5 24 9 Q26 5 30 9 Q34 12 30 18 Z" fill="white" stroke={color} stroke-width="1.4" />
  <rect x="18" y="18" width="12" height="4" rx="1" fill="white" stroke={color} stroke-width="1.4" />
</svg>
