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

interface ChartCardProps {
  title: string
  subtitle?: string
  className?: string
  children?: React.ReactNode
  icon?: React.ReactNode
  value?: number
  prefix?: string
  suffix?: string
  change?: number
  gradient?: string
}

export function ChartCard({ title, subtitle, className, children, icon, value, prefix, suffix, change, gradient = 'from-cyan-500/10 to-blue-500/10' }: ChartCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className={cn('glass rounded-2xl p-5', className)}
    >
      <div className="flex items-start justify-between mb-4">
        <div>
          <p className="text-sm text-slate-400">{title}</p>
          {value !== undefined && (
            <p className="text-2xl font-bold text-white mt-1">
              <AnimatedCounter value={value} prefix={prefix} suffix={suffix} />
            </p>
          )}
          {change !== undefined && (
            <span className={cn('text-xs font-medium', change >= 0 ? 'text-emerald-400' : 'text-red-400')}>
              {change >= 0 ? '↑' : '↓'} {Math.abs(change)}%
            </span>
          )}
          {subtitle && <p className="text-xs text-slate-500 mt-1">{subtitle}</p>}
        </div>
        {icon && (
          <div className={cn('w-10 h-10 rounded-xl bg-gradient-to-br flex items-center justify-center', gradient)}>
            {icon}
          </div>
        )}
      </div>
      {children}
    </motion.div>
  )
}