"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useInView, useMotionValue, useSpring } from "framer-motion"; import { TrendingUp, Activity, ArrowUpRight, Zap, Target, Waves } from "lucide-react"; interface CounterProps { value: number; decimals?: number; prefix?: string; suffix?: string; } const Counter = ({ value, decimals = 0, prefix = "", suffix = "" }: CounterProps) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-50px" }); const motionValue = useMotionValue(0); const springValue = useSpring(motionValue, { damping: 40, stiffness: 120, }); const [displayValue, setDisplayValue] = useState(prefix + (0).toFixed(decimals) + suffix); useEffect(() => { if (isInView) motionValue.set(value); }, [isInView, value, motionValue]); useEffect(() => { return springValue.on("change", (latest) => { setDisplayValue( prefix + latest.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }) + suffix ); }); }, [springValue, decimals, prefix, suffix]); return {displayValue}; }; export default function AnimatedCounterPro() { return (

{/* CARD PRINCIPAL: REVENUE (Masiva) */}

+24.8%

Gross Liquidity Flux

Live Engine

Global Vault

{/* Decoración de fondo */}

{/* COLUMNA DERECHA: MÉTRICAS SECUNDARIAS */}

{/* MINI CARD 1: LATENCY */}

Response

{/* MINI CARD 2: UPTIME (Dark Mode Inverse) */}

System Uptime

Stable

{/* Brillo decorativo invertido */}

); }