import { useEffect } from 'react'
import { motion, animate, useMotionValue, useTransform } from 'framer-motion'
import { Streak } from './Streak'

interface ProgressBarProps {
    current: number
    total: number
    streak: number
}

export const ProgressBar = ({ current, total, streak }: ProgressBarProps) => {
    const progress = total > 0 ? (current / total) : 0
    const progressPercent = progress * 100

    // Animate the number counting up
    const count = useMotionValue(0)
    const rounded = useTransform(count, latest => `${latest.toFixed(0)}%`)

    useEffect(() => {
        const controls = animate(count, progressPercent, { duration: 0.5 })
        return controls.stop
    }, [progressPercent])

    return (
        <div className="fixed top-4 left-4 right-4 z-50 flex flex-col items-center pointer-events-none">
            <div className="w-full max-w-[450px] h-[25px] bg-background/80 backdrop-blur-sm border border-border rounded shadow-md overflow-hidden relative">
                <motion.div
                    className="h-full bg-gradient-to-r from-orange-400 to-red-400"
                    initial={{ width: 0 }}
                    animate={{ width: `${progressPercent}%` }}
                    transition={{ ease: "easeInOut", duration: 0.5 }}
                />
                <div className="absolute inset-0 flex items-center justify-center">
                    <motion.span className="text-[10px] font-bold tracking-widest text-foreground mix-blend-difference">
                        {rounded}
                    </motion.span>
                </div>
            </div>
            <div className="pointer-events-auto">
                <Streak streak={streak} />
            </div>
        </div>
    )
}
