import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
import './StatCard.css'

/**
 * 统计卡片组件
 * @param {Object} props
 * @param {string} props.title - 卡片标题
 * @param {number|string} props.value - 统计值
 * @param {ReactNode} props.icon - 图标
 * @param {string} props.color - 主题颜色，默认 'blue'
 * @param {Object} props.trend - 趋势信息 { value: number, direction: 'up' | 'down' }
 * @param {string} props.suffix - 后缀单位
 * @param {string} props.layout - 布局模式: 'column' | 'row'，默认 'column'（一列）
 * @param {string} props.gridColumn - 网格列跨度，如 '1 / -1' 表示占满整行
 * @param {string} props.className - 自定义类名
 * @param {Function} props.onClick - 点击事件处理函数
 * @param {Object} props.style - 自定义样式对象
 */
function StatCard({
  title,
  value,
  icon,
  color = 'blue',
  trend,
  suffix = '',
  layout = 'column',
  gridColumn,
  className = '',
  onClick,
  style: customStyle = {},
}) {
  const colorMap = {
    blue: '#1677ff',
    green: '#52c41a',
    orange: '#faad14',
    red: '#ff4d4f',
    purple: '#722ed1',
    gray: '#8c8c8c',
  }

  const themeColor = colorMap[color] || color

  const style = {
    ...(gridColumn ? { gridColumn } : {}),
    ...customStyle,
  }

  return (
    <div className={`stat-card stat-card-${layout} ${className}`} style={style} onClick={onClick}>
      <div className="stat-card-header">
        <span className="stat-card-title">{title}</span>
        {icon && (
          <span className="stat-card-icon" style={{ color: themeColor }}>
            {icon}
          </span>
        )}
      </div>

      <div className="stat-card-body">
        <div className="stat-card-value" style={{ color: themeColor }}>
          {value}
          {suffix && <span className="stat-card-suffix">{suffix}</span>}
        </div>

        {trend && (
          <div
            className={`stat-card-trend ${trend.direction === 'up' ? 'trend-up' : 'trend-down'}`}
          >
            {trend.direction === 'up' ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
            <span>{Math.abs(trend.value)}%</span>
          </div>
        )}
      </div>
    </div>
  )
}

export default StatCard