import { SimpleGrid } from '@mantine/core'
import { StatCard, type StatCardProps } from './StatCard'

export interface StatGridProps {
  stats: StatCardProps[]
  /** Columns on wide screens (responsive down to 1). Defaults to stats.length capped at 4. */
  columns?: number
}

// A responsive row of StatCards. Feed it the metrics from a stats RPC
// (e.g. getTaskStats) mapped to {label, value, icon}.
export function StatGrid({ stats, columns }: StatGridProps) {
  const cols = columns ?? Math.min(stats.length || 1, 4)
  return (
    <SimpleGrid cols={{ base: 1, sm: 2, lg: cols }} spacing="md">
      {stats.map((stat, index) => (
        <StatCard key={index} {...stat} />
      ))}
    </SimpleGrid>
  )
}