import * as React from 'react';
import './StatsGrid.less';

interface StatCardProps {
    icon: string;
    iconBgColor: 'blue' | 'indigo' | 'orange' | 'green';
    title: string;
    value: string;
    subValue?: string;
    trend?: string;
    trendColor?: 'green' | 'blue' | 'orange' | 'gray';
}

const StatCard: React.FC<StatCardProps> = (props) => {
    const { icon, iconBgColor, title, value, subValue, trend, trendColor = 'gray' } = props;

    return (
        <div className='stat-card'>
            <div className='stat-card-header'>
                <div className={`stat-card-icon bg-${iconBgColor}`}>
                    <span className={`iconify icon-${iconBgColor}`} data-icon={icon}></span>
                </div>
                {trend && (
                    <span className={`stat-card-trend text-${trendColor}`}>{trend}</span>
                )}
            </div>
            <p className='stat-card-label'>{title}</p>
            <h4 className='stat-card-value'>
                {value}
                {subValue && <small>{subValue}</small>}
            </h4>
        </div>
    );
};

const StatsGrid: React.FC = () => {
    const stats = [
        {
            icon: 'solar:shop-2-bold-duotone',
            iconBgColor: 'blue',
            title: '已接入应用',
            value: '1,284',
            trend: '+12% 上月',
            trendColor: 'green',
        },
        {
            icon: 'solar:cpu-bold-duotone',
            iconBgColor: 'indigo',
            title: '今日 AI 调用量',
            value: '45.2w',
            subValue: '次',
            trend: '运行正常',
            trendColor: 'blue',
        },
        {
            icon: 'solar:database-bold-duotone',
            iconBgColor: 'orange',
            title: '算力资源池',
            value: '12.4',
            subValue: 'PFLOPS',
            trend: '占用 64%',
            trendColor: 'orange',
        },
        {
            icon: 'solar:shield-check-bold-duotone',
            iconBgColor: 'green',
            title: '安全合规检测',
            value: '100%',
            trend: '持续保护',
            trendColor: 'gray',
        },
    ];

    return (
        <section className='stats-grid'>
            {stats.map((stat, index) => (
                <StatCard key={index} {...stat} />
            ))}
        </section>
    );
};

export default StatsGrid;
