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

/**
 * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
 * 
 * Grid is for grid-based layouts.
 * 
 * - DO NOT add positioning props (absolute, top, zIndex).
 * - 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> extends BoxProps<T> {
  as?: T;
  children?: ReactNode;
  cols?: number | ResponsiveValue<number>;
  gap?: number | string | ResponsiveValue<number | string>;
  mdCols?: number;
  lgCols?: number;
}

export const Grid = forwardRef(<T extends ElementType = 'div'>(
  { 
    children, 
    cols = 1, 
    gap = 4,
    as,
    mdCols,
    lgCols,
    ...props
  }: GridProps<T>,
  ref: ForwardedRef<HTMLElement>
) => {
  const finalCols = typeof cols === 'object' ? { ...cols } : { base: cols };
  if (mdCols) finalCols.md = mdCols;
  if (lgCols) finalCols.lg = lgCols;

  return (
    <Box 
      as={as} 
      ref={ref}
      display="grid"
      gridCols={finalCols}
      gap={gap}
      {...props}
    >
      {children}
    </Box>
  );
});

Grid.displayName = 'Grid';