'use client'

import type { ComponentRenderProps } from '@json-render/react'

export function StatsGrid({ element, children }: ComponentRenderProps) {
  const { columns = 3 } = element.props as { columns?: number }
  const gridCols: Record<number, string> = {
    2: 'grid-cols-2',
    3: 'grid-cols-2 sm:grid-cols-3',
    4: 'grid-cols-2 sm:grid-cols-4',
    6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
  }

  return (
    <div className={`grid ${gridCols[columns] || gridCols[3]} gap-4 mb-4`}>
      {children}
    </div>
  )
}
