'use client'

import Lottie from 'lottie-react'
import { useEffect, useState } from 'react'

const animCache = new Map<string, object>()

export default function StickerLottiePreview({ url, className }: { url: string; className?: string }) {
    const [data, setData] = useState<object | null>(() => animCache.get(url) ?? null)

    useEffect(() => {
        if (!url) return

        const cached = animCache.get(url)
        if (cached) {
            setData(cached)
            return
        }

        let cancelled = false
        setData(null)

        fetch(url)
            .then((r) => r.json())
            .then((json) => {
                if (cancelled) return
                animCache.set(url, json)
                setData(json)
            })
            .catch(() => {
                if (!cancelled) setData(null)
            })

        return () => {
            cancelled = true
        }
    }, [url])

    if (!data) {
        return <div className={className} aria-hidden />
    }

    return <Lottie animationData={data} loop autoplay className={className} />
}