<script lang="ts">
	interface Props {
		size?: "sm" | "md";
	}

	let { size = "md" }: Props = $props();

	const sizeClasses = {
		sm: "w-10 h-10",
		md: "w-12 h-12",
	};
</script>

<div class="flex items-center justify-center {sizeClasses[size]}">
	<svg
		viewBox="0 0 38 21"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
		class="w-full h-auto"
	>
		<!-- Root logo SVG paths matching Figma -->
		<path
			d="M0 0.5C0 0.224 0.224 0 0.5 0H37.5C37.776 0 38 0.224 38 0.5V12.203C38 12.479 37.776 12.703 37.5 12.703H0.5C0.224 12.703 0 12.479 0 12.203V0.5Z"
			fill="#00A3E0"
			fill-opacity="0.2"
		/>
		<!-- Left eye -->
		<circle cx="11.5" cy="7.5" r="5" fill="#00A3E0" />
		<!-- Right eye -->
		<circle cx="23.5" cy="7.5" r="5" fill="#00A3E0" />
		<!-- Mouth/smile -->
		<path
			d="M12.25 15.04C12.25 15.04 15 20.25 18.75 20.25C22.5 20.25 25.25 15.04 25.25 15.04"
			stroke="#00A3E0"
			stroke-width="2"
			stroke-linecap="round"
		/>
	</svg>
</div>
