import { LucideIcon } from 'lucide-react';
import { Box } from './Box';
import { CategoryDistributionCard } from './CategoryDistributionCard';

export interface CategoryData {
  id: string;
  label: string;
  count: number;
  icon: LucideIcon;
  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
}

export interface CategoryDistributionProps {
  categories: CategoryData[];
}

export const CategoryDistribution = ({ 
  categories 
}: CategoryDistributionProps) => {
  const total = categories.reduce((acc, cat) => acc + cat.count, 0);

  return (
    <Box display="grid" gridCols={{ base: 1, md: 2, lg: 3 }} gap={4}>
      {categories.map((category) => (
        <CategoryDistributionCard 
          key={category.id}
          label={category.label}
          count={category.count}
          total={total}
          icon={category.icon}
          intent={category.intent}
        />
      ))}
    </Box>
  );
};