/**
 * KRA - Dashboard Statistics Cards
 * 与GVA charts.vue 逻辑一致 - 统计卡片带小图表
 */
import React from 'react';
import { Row, Col, Card, Statistic } from 'antd';
import { ArrowUpOutlined } from '@ant-design/icons';
import MiniLineChart from './MiniLineChart';

interface StatItem {
  title: string;
  value: number;
  data: number[];
}

const stats: StatItem[] = [
  {
    title: '访问人数',
    value: 268500,
    data: [12, 22, 32, 45, 32, 78, 89, 92],
  },
  {
    title: '新增客户',
    value: 268500,
    data: [1, 2, 43, 5, 67, 78, 89, 12],
  },
  {
    title: '解决数量',
    value: 268500,
    data: [12, 22, 32, 45, 32, 78, 89, 92],
  },
];

const StatCards: React.FC = () => {
  return (
    <Row gutter={[16, 16]}>
      {stats.map((stat, index) => (
        <Col xs={24} sm={8} key={index}>
          <Card className="kra-dashboard-card" variant="borderless">
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>{stat.title}</div>
                <div style={{ marginTop: '16px' }}>
                  <Statistic value={stat.value} />
                </div>
                <div style={{ marginTop: '8px', color: '#52c41a', fontSize: '14px', fontWeight: 'bold' }}>
                  +80% <ArrowUpOutlined />
                </div>
              </div>
              <div style={{ width: '50%', height: '80px', position: 'relative' }}>
                <MiniLineChart data={stat.data} />
              </div>
            </div>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

export default StatCards;
