/**
 * filekorolheader: 企业审核统计卡片组件 - 统计数据展示界面
 * 功能：待审核、已通过、已驳回、总企业数统计展示
 * 路径：/central-config/tenant/enterprise-audit/components/AuditStatsCards
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
 */

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

interface AuditStatsCardsProps {
  enterprises: Enterprise[];
  loading?: boolean;
}

export function AuditStatsCards({
  enterprises,
  loading = false
}: AuditStatsCardsProps) {
  const stats = [
    {
      label: '待审核',
      value: enterprises.filter(e => e.auditStatus === '待审核').length,
      color: 'text-yellow-600',
      bg: 'bg-yellow-100',
    },
    {
      label: '已通过',
      value: enterprises.filter(e => e.auditStatus === '已通过').length,
      color: 'text-green-600',
      bg: 'bg-green-100',
    },
    {
      label: '已驳回',
      value: enterprises.filter(e => e.auditStatus === '已驳回').length,
      color: 'text-red-600',
      bg: 'bg-red-100',
    },
    {
      label: '总企业数',
      value: enterprises.length,
      color: 'text-blue-600',
      bg: 'bg-blue-100',
    },
  ];

  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>
  );
}