import BlockOutlined from "@mui/icons-material/BlockOutlined";
import ManageAccountsOutlined from "@mui/icons-material/ManageAccountsOutlined";
import ShieldOutlined from "@mui/icons-material/ShieldOutlined";
import VerifiedUserOutlined from "@mui/icons-material/VerifiedUserOutlined";
import { KpiCard } from "@/shared/ui/KpiCard.jsx";
import { userStatusMeta } from "@/features/users/constants.js";

export function UserStats({ stats, total }) {
  return (
    <section className="user-kpi-row" aria-label="用户指标">
      <KpiCard icon={ManageAccountsOutlined} label="用户总数" value={total} sub={<span className="status-ok">{stats.active} 个启用账户</span>} />
      <KpiCard icon={ShieldOutlined} label="管理员" value={stats.admin} tone="info" sub={<span className="status-ok">当前页统计</span>} />
      <KpiCard icon={VerifiedUserOutlined} label={userStatusMeta.active.label} value={stats.active} tone="success" sub={<span className="status-ok">可登录控制台</span>} />
      <KpiCard icon={BlockOutlined} label={userStatusMeta.locked.label} value={stats.locked} tone="warning" sub={<span className="status-warn">需管理员处理</span>} />
    </section>
  );
}
