import * as React from 'react'

export interface DashboardGridProps {
  children: React.ReactNode
  /** Number of columns at lg breakpoint */
  columns?: 1 | 2 | 3 | 4
  /** Gap size between items */
  gap?: 'sm' | 'md' | 'lg'
  className?: string
}

const gapMap = { sm: 'gap-4', md: 'gap-6', lg: 'gap-8' } as const

const colMap = {
  1: 'lg:grid-cols-1',
  2: 'lg:grid-cols-2',
  3: 'lg:grid-cols-3',
  4: 'sm:grid-cols-2 lg:grid-cols-4',
} as const

export function DashboardGrid({
  children,
  columns = 2,
  gap = 'md',
  className = '',
}: DashboardGridProps) {
  return (
    <div className={`grid grid-cols-1 ${colMap[columns]} ${gapMap[gap]} ${className}`}>
      {children}
    </div>
  )
}