<script lang="ts">
    import { onMount } from "svelte";

    let canvasElement = $state<HTMLCanvasElement>();

    onMount(() => {
        if (!canvasElement) return;
        const ctx = canvasElement.getContext("2d");
        if (!ctx) return;

        let frame = 0;
        let animationId: number;

        function animate() {
            frame++;
            if (!ctx || !canvasElement) return;
            ctx.clearRect(0, 0, 40, 40);

            const yOffset = Math.sin(frame * 0.05) * 3;

            
            ctx.fillStyle = "#e0e0e0";
            ctx.beginPath();
            ctx.arc(20, 20, 18, 0, Math.PI * 2);
            ctx.fill();

            
            ctx.fillStyle = "#22c55e";
            ctx.beginPath();
            ctx.arc(20, 20 + yOffset, 14, 0, Math.PI * 2);
            ctx.fill();

            
            ctx.fillStyle = "#16a34a";
            ctx.beginPath();
            ctx.moveTo(20, 8 + yOffset);
            ctx.quadraticCurveTo(28, 4 + yOffset, 24, 16 + yOffset);
            ctx.closePath();
            ctx.fill();

            
            ctx.fillStyle = "white";
            ctx.fillRect(14, 16 + yOffset, 3, 5);
            ctx.fillRect(23, 16 + yOffset, 3, 5);

            
            ctx.strokeStyle = "white";
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.arc(20, 26 + yOffset, 4, 0.2, Math.PI - 0.2);
            ctx.stroke();

            animationId = requestAnimationFrame(animate);
        }
        animate();

        return () => {
            if (animationId) cancelAnimationFrame(animationId);
        };
    });
</script>

<div class="relative w-10 h-10">
    <canvas
        bind:this={canvasElement}
        width="40"
        height="40"
        class="w-10 h-10 drop-shadow-[0_4px_12px_rgba(16,185,129,0.4)]"
    ></canvas>
    <div
        class="absolute bottom-0.5 right-0.5 w-2.5 h-2.5 bg-emerald-400 border-2 border-[#051f18] rounded-full shadow-[0_0_8px_rgba(52,211,153,0.6)]"
    ></div>
</div>
