import { motion } from 'framer-motion';
import { cn } from '@/lib/utils';

export function ProgressBar({ value, max = 100, className, showLabel = true, color, size = 'md' }) {
    const pct = Math.min(100, Math.max(0, (value / max) * 100));

    const autoColor = color ?? (
        pct >= 90 ? 'red' :
        pct >= 70 ? 'yellow' :
        pct >= 50 ? 'cyan' : 'green'
    );

    const colors = {
        cyan:   { bar: 'bg-cyan-400',   glow: 'shadow-[0_0_10px_rgba(0,212,255,0.5)]' },
        green:  { bar: 'bg-green-400',  glow: 'shadow-[0_0_10px_rgba(0,255,136,0.5)]' },
        yellow: { bar: 'bg-yellow-400', glow: 'shadow-[0_0_10px_rgba(255,255,0,0.5)]' },
        red:    { bar: 'bg-red-400',    glow: 'shadow-[0_0_10px_rgba(255,45,85,0.5)]' },
        purple: { bar: 'bg-purple-400', glow: 'shadow-[0_0_10px_rgba(157,78,221,0.5)]' },
    };
    const c = colors[autoColor] ?? colors.cyan;
    const heights = { sm: 'h-1', md: 'h-1.5', lg: 'h-2' };

    return (
        <div className={cn('space-y-1', className)}>
            {showLabel && (
                <div className="flex justify-between text-xs text-white/50">
                    <span>{Math.round(pct)}%</span>
                </div>
            )}
            <div className={cn('w-full bg-white/10 rounded-full overflow-hidden', heights[size])}>
                <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${pct}%` }}
                    transition={{ duration: 0.8, ease: 'easeOut' }}
                    className={cn('h-full rounded-full', c.bar, c.glow)}
                />
            </div>
        </div>
    );
}