import React, { ReactNode, ElementType } from 'react';
import { Box, BoxProps, ResponsiveValue } from './Box';

/**
 * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
 * 
 * Grid is for CSS Grid-based layouts.
 * 
 * - DO NOT add positioning props (absolute, top, zIndex).
 * - DO NOT add flex props.
 * - DO NOT add background/border props unless it's a specific styled grid.
 * 
 * If you need a more specific layout, create a new component in apps/website/components.
 */

export interface GridProps<T extends ElementType = 'div'> extends BoxProps<T> {
  children?: ReactNode;
  columns?: number | ResponsiveValue<number>;
  gap?: number | string | ResponsiveValue<number | string>;
}

export function Grid<T extends ElementType = 'div'>({ 
  children, 
  columns = 1, 
  gap = 4,
  ...props 
}: GridProps<T>) {
  return (
    <Box 
      display="grid" 
      gridCols={columns} 
      gap={gap} 
      {...props}
    >
      {children}
    </Box>
  );
}