/**
 * DashboardQuickStats Component
 *
 * Displays quick stats cards for the dashboard:
 * - Active Projects
 * - Running Agents
 * - Open Issues
 * - Pending Approvals
 *
 * @see Issue #53
 */

'use client';

import { Folder, Bot, CircleDot, AlertCircle } from 'lucide-react';
import { StatCard } from '@/components/admin/StatCard';
import type { DashboardStats } from '@/lib/api/hooks/useDashboard';

export interface DashboardQuickStatsProps {
  /** Stats data */
  stats?: DashboardStats;
  /** Whether data is loading */
  isLoading?: boolean;
  /** Additional CSS classes */
  className?: string;
}

export function DashboardQuickStats({
  stats,
  isLoading = false,
  className,
}: DashboardQuickStatsProps) {
  return (
    <div className={className}>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <StatCard
          title="Active Projects"
          value={stats?.activeProjects ?? 0}
          icon={Folder}
          description="Currently in progress"
          loading={isLoading}
        />
        <StatCard
          title="Running Agents"
          value={stats?.runningAgents ?? 0}
          icon={Bot}
          description="Working on tasks"
          loading={isLoading}
        />
        <StatCard
          title="Open Issues"
          value={stats?.openIssues ?? 0}
          icon={CircleDot}
          description="Across all projects"
          loading={isLoading}
        />
        <StatCard
          title="Pending Approvals"
          value={stats?.pendingApprovals ?? 0}
          icon={AlertCircle}
          description="Awaiting your review"
          loading={isLoading}
        />
      </div>
    </div>
  );
}
