/**
 * filekorolheader: 部门管理统计卡片组件 - 部门统计数据展示界面
 * 功能：一级部门、二级部门、部门总数统计展示
 * 路径：/central-config/user/department/components/DepartmentStatsCards
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
 */

'use client';

import { Card } from '@/components/ui/card';
import { Building2, Layers, GitBranch } from 'lucide-react';
import { DepartmentStats } from '../types';

interface DepartmentStatsCardsProps {
  stats: DepartmentStats;
  loading?: boolean;
}

export function DepartmentStatsCards({
  stats,
  loading = false
}: DepartmentStatsCardsProps) {
  const statsData = [
    {
      label: '一级部门',
      value: stats.level1,
      icon: <Building2 className="w-5 h-5" />,
      color: 'text-blue-600 dark:text-blue-400',
      bg: 'bg-blue-50 dark:bg-blue-950',
    },
    {
      label: '二级部门',
      value: stats.level2,
      icon: <GitBranch className="w-5 h-5" />,
      color: 'text-green-600 dark:text-green-400',
      bg: 'bg-green-50 dark:bg-green-950',
    },
    {
      label: '部门总数',
      value: stats.total,
      icon: <Layers className="w-5 h-5" />,
      color: 'text-orange-600 dark:text-orange-400',
      bg: 'bg-orange-50 dark:bg-orange-950',
    },
  ];

  if (loading) {
    return (
      <div className="grid grid-cols-3 gap-4">
        {statsData.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-3 gap-4">
      {statsData.map((stat, index) => (
        <Card key={index} className={`p-4 ${stat.bg}`}>
          <div className="flex items-center justify-between mb-2">
            <div className="text-sm text-muted-foreground">{stat.label}</div>
            <div className={stat.color}>
              {stat.icon}
            </div>
          </div>
          <div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
        </Card>
      ))}
    </div>
  );
}