'use client';

import { Grid } from '@/ui/primitives/Grid';
import { StatCard } from '@/ui/StatCard';
import { LucideIcon } from 'lucide-react';

interface AdminStat {
  label: string;
  value: string | number;
  icon: LucideIcon;
  variant?: 'blue' | 'purple' | 'green' | 'orange';
  trend?: {
    value: number;
    isPositive: boolean;
  };
}

interface AdminStatsPanelProps {
  stats: AdminStat[];
}

/**
 * AdminStatsPanel
 * 
 * Semantic container for admin statistics.
 * Renders a grid of StatCards.
 */
export function AdminStatsPanel({ stats }: AdminStatsPanelProps) {
  return (
    <Grid cols={1} mdCols={2} lgCols={4} gap={4}>
      {stats.map((stat, index) => (
        <StatCard
          key={stat.label}
          label={stat.label}
          value={stat.value}
          icon={stat.icon}
          variant={stat.variant}
          trend={stat.trend}
          delay={index * 0.05}
        />
      ))}
    </Grid>
  );
}