import React, { useRef, useState, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Plus, Eye, EyeOff } from 'lucide-react' import Image from 'next/image' const AnimatedCardBalance = () => { const [showBalance, setShowBalance] = useState(false) const [isAnimating, setIsAnimating] = useState(false) const finalBalance = 50000 const audioRef = useRef(new Audio('https://kxptt4m9j4.ufs.sh/f/9YHhEDeslzkcUUzG4vrHo1YhFXmiTgQ84RDvW0rajlnKqbes')) const lastPlayedRef = useRef(0) const handleBalanceClick = async () => { try { if (!showBalance) { const audio = audioRef.current; await audio.play(); setIsAnimating(true); } setShowBalance(!showBalance); } catch (error) { console.error('Audio play error:', error); // Still toggle balance even if audio fails setShowBalance(!showBalance); setIsAnimating(true); } }; useEffect(() => { const audio = audioRef.current audio.volume = 0.5 const handleAudioEnd = () => setIsAnimating(false) audio.addEventListener('ended', handleAudioEnd) return () => { audio.removeEventListener('ended', handleAudioEnd) audio.pause() audio.currentTime = 0 } }, []) const playCountSound = () => { const now = Date.now() if (now - lastPlayedRef.current > 2000) { const audio = audioRef.current audio.pause() audio.currentTime = 0 audio.play().then(() => lastPlayedRef.current = now).catch(console.error) } } const formatCurrency = (value: number) => { return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR', maximumFractionDigits: 0 }).format(value) } const CountUp = ({ end, duration }: { end: number; duration: number }) => { const [count, setCount] = useState(0) const previousCount = useRef(count) useEffect(() => { if (!isAnimating) { setCount(end) return } let startTime: number let animationFrame: number const animate = (currentTime: number) => { if (!startTime) startTime = currentTime const progress = Math.min((currentTime - startTime) / (duration * 1000), 1) const easedProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress) const newCount = Math.min(end * easedProgress, end) setCount(newCount) if (Math.floor(newCount / 1000) > Math.floor(previousCount.current / 1000)) { playCountSound() } previousCount.current = newCount if (progress < 1) { animationFrame = requestAnimationFrame(animate) } } animationFrame = requestAnimationFrame(animate) return () => cancelAnimationFrame(animationFrame) }, [end, duration, isAnimating]) return <>{formatCurrency(Math.floor(count))} } return (

{/* Card Pattern */}

{/* Dot Pattern */}

{/* Light Reflection */}

{/* Header */}

SBI Bank

{/* Main dot */}

{/* Ping animation */}

{/* Glow effect */}

Active

{/* Account Info */}

Account Number

**** **** **** 1234

{/* Balance Display */} {showBalance && (

Available Balance

)} {/* Actions */}

Add Money {showBalance ? ( <>Hide Balance ) : ( <> Check Balance )}

) } export default AnimatedCardBalance