@props([
    'symbol' => '❄️',
    'duration' => 300,
])

<style>
    .falling-symbol {
        position: fixed;
        top: -10px;
        color: white;
        font-size: 1rem;
        user-select: none;
        animation: fall linear infinite;
        z-index: 50;
        pointer-events: none;
    }

    @keyframes fall {
        to {
            transform: translateY(100vh);
        }
    }
</style>

<div x-data x-init="setInterval(() => {
    const el = document.createElement('div');
    el.className = 'falling-symbol';
    el.style.left = Math.random() * window.innerWidth + 'px';
    el.style.opacity = Math.random();
    el.style.fontSize = (Math.random() * 10 + 10) + 'px';
    el.style.animationDuration = (Math.random() * 5 + 5) + 's';
    el.innerHTML = `<img src='{{ $symbol }}' style='width: 1em; height: 1em;'>`;
    document.body.appendChild(el);
    setTimeout(() => el.remove(), 10000);
}, {{ $duration }});">
</div>