import { StatGrid } from '../../ui/StatGrid';
import { Bug } from 'lucide-react';
import React from 'react';

interface Stat {
  label: string;
  value: string | number;
  intent?: 'primary' | 'telemetry' | 'success' | 'critical';
  color?: string;
}

interface ProfileStatGridProps {
  stats: Stat[];
}

export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
  const mappedStats = stats.map(stat => ({
    label: stat.label,
    value: stat.value,
    intent: stat.intent || 'primary',
    color: stat.color,
    icon: Bug // Default icon if none provided, but StatBox requires one
  }));

  return (
    <StatGrid 
      stats={mappedStats}
      columns={{ base: 2, md: 4 }}
      variant="box"
    />
  );
}