<template>
    <canvas ref="canvas" class="snow-canvas"></canvas>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const canvas = ref(null);

onMounted(() => {
    const ctx = canvas.value.getContext('2d');
    const snowflakes = [];
    const numFlakes = 80;

    function initCanvas() {
        canvas.value.width = window.innerWidth;
        canvas.value.height = window.innerHeight;
    }

    function createFlakes() {
        for (let i = 0; i < numFlakes; i++) {
            snowflakes.push({
                x: Math.random() * canvas.value.width,
                y: Math.random() * canvas.value.height,
                radius: Math.random() * 2 + 1,
                speed: Math.random() * 0.2 + 0.2,
                wind: Math.random() * 0.9 - 0.5,
            });
        }
    }

    function drawFlakes() {
        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
        ctx.fillStyle = 'white';
        ctx.beginPath();

        snowflakes.forEach(flake => {
            ctx.moveTo(flake.x, flake.y);
            ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
        });

        ctx.fill();
        updateFlakes();
    }

    function updateFlakes() {
        snowflakes.forEach(flake => {
            flake.y += flake.speed;
            flake.x += flake.wind;

            if (flake.y > canvas.value.height) {
                flake.y = 0;
                flake.x = Math.random() * canvas.value.width;
            }
        });
    }

    function animate() {
        drawFlakes();
        requestAnimationFrame(animate);
    }

    window.addEventListener('resize', initCanvas);
    initCanvas();
    createFlakes();
    animate();
});
</script>

<style>
.snow-canvas {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    //background: #000;
}
</style>
