/**
 * filekorolheader: 用户管理统计卡片组件 - 用户统计数据展示界面
 * 功能：总用户数、活跃用户、管理员、已验证用户统计展示
 * 路径：/central-config/tenant/user-management/components/UserManagementStatsCards
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
 */

'use client';

import { Card } from '@/components/ui/card';

interface UserManagementStatsCardsProps {
  stats: Array<{
    label: string;
    value: number;
    color: string;
    bg: string;
  }>;
  loading?: boolean;
}

export function UserManagementStatsCards({
  stats,
  loading = false
}: UserManagementStatsCardsProps) {
  if (loading) {
    return (
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {stats.map((_, index) => (
          <Card key={index} className="p-4">
            <div className="animate-pulse">
              <div className="h-4 bg-gray-200 rounded mb-2"></div>
              <div className="h-8 bg-gray-200 rounded"></div>
            </div>
          </Card>
        ))}
      </div>
    );
  }

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      {stats.map((stat, index) => (
        <Card key={index} className="p-4">
          <div className="text-sm text-muted-foreground">{stat.label}</div>
          <div className={`mt-2 text-2xl font-bold ${stat.color}`}>{stat.value}</div>
        </Card>
      ))}
    </div>
  );
}