import { Card, Statistic } from 'antd'
import type { ReactNode } from 'react'

type Color = 'blue' | 'green' | 'orange' | 'purple' | 'red'

const colorMap: Record<Color, { bg: string; color: string }> = {
  blue:   { bg: '#e6f4ff', color: '#1677ff' },
  green:  { bg: '#f6ffed', color: '#52c41a' },
  orange: { bg: '#fff7e6', color: '#fa8c16' },
  purple: { bg: '#f9f0ff', color: '#722ed1' },
  red:    { bg: '#fff1f0', color: '#ff4d4f' },
}

interface StatCardProps {
  icon: ReactNode
  color?: Color
  title: string
  value: number | string
  suffix?: string
  precision?: number
  valueStyle?: React.CSSProperties
}

export default function StatCard({ icon, color = 'blue', title, value, suffix, precision, valueStyle }: StatCardProps) {
  const c = colorMap[color]
  return (
    <Card>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 10,
          background: c.bg,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <span style={{ fontSize: 22, color: c.color, display: 'flex' }}>{icon}</span>
        </div>
        <Statistic title={title} value={value} suffix={suffix} precision={precision} valueStyle={valueStyle} />
      </div>
    </Card>
  )
}
