'use client';

import React from 'react';
import { Card } from '@/components/ui/card';
import { UserManagementStats, User } from '../types';

interface UserManagementStatsCardsProps {
  users: User[];
}

export function UserManagementStatsCards({ users }: UserManagementStatsCardsProps) {
  const stats: UserManagementStats[] = [
    {
      label: '总用户数',
      value: users.length,
      color: 'text-blue-600',
      bg: 'bg-blue-100',
    },
    {
      label: '超级管理员',
      value: users.filter(u => u.userType === 'super_admin').length,
      color: 'text-purple-600',
      bg: 'bg-purple-100',
    },
    {
      label: '企业管理员',
      value: users.filter(u => u.userType === 'enterprise_admin').length,
      color: 'text-blue-600',
      bg: 'bg-blue-100',
    },
    {
      label: '正常用户',
      value: users.filter(u => u.status === 'active').length,
      color: 'text-green-600',
      bg: 'bg-green-100',
    },
  ];

  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 ${stat.color} text-2xl font-semibold`}>{stat.value}</div>
        </Card>
      ))}
    </div>
  );
}