import { motion, AnimatePresence } from 'framer-motion'
import { useEffect, useState } from 'react'

interface StreakProps {
    streak: number
}

const ACTIVATE_AT = 5

export const Streak = ({ streak }: StreakProps) => {
    const [shouldPulse, setShouldPulse] = useState(false)

    useEffect(() => {
        if (streak >= ACTIVATE_AT) {
            setShouldPulse(true)
        }
    }, [streak])

    return (
        <AnimatePresence>
            {streak >= 3 && (
                <motion.div
                    key="streak"
                    initial={{ scale: 0.85, opacity: 0, y: -10 }}
                    animate={{ scale: shouldPulse ? 1.125 : 1, opacity: 1, y: 0 }}
                    exit={{ opacity: 0 }}
                    className="relative mt-4 mx-auto w-fit z-10"
                >
                    <div className="relative z-10 bg-card border-2 border-orange-400 text-orange-400 rounded px-5 py-1 text-xs font-bold uppercase tracking-wider shadow-sm">
                        Streak x{streak} 🔥
                    </div>
                    {shouldPulse && (
                        <motion.div
                            key="pulse"
                            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-orange-400 rounded-full -z-10"
                            initial={{ scale: 1, opacity: 0.8 }}
                            animate={{ scale: 2.5, opacity: 0 }}
                            transition={{ duration: 0.8, ease: "easeOut" }}
                            onAnimationComplete={() => setShouldPulse(false)}
                        />
                    )}
                </motion.div>
            )}
        </AnimatePresence>
    )
}
