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 Omit<BoxProps<T>, 'children'> {
  children?: ReactNode;
  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
  mdCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
  lgCols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
  gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16;
  className?: string;
}

export function Grid<T extends ElementType = 'div'>({ 
  children, 
  cols = 1, 
  mdCols,
  lgCols,
  gap = 4,
  className = '',
  ...props 
}: GridProps<T>) {
  const colClasses: Record<number, string> = {
    1: 'grid-cols-1',
    2: 'grid-cols-1 md:grid-cols-2',
    3: 'grid-cols-1 md:grid-cols-3',
    4: 'grid-cols-2 md:grid-cols-4',
    5: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-5',
    6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6',
    12: 'grid-cols-12'
  };

  const gapClasses: Record<number, string> = {
    0: 'gap-0',
    1: 'gap-1',
    2: 'gap-2',
    3: 'gap-3',
    4: 'gap-4',
    6: 'gap-6',
    8: 'gap-8',
    12: 'gap-12',
    16: 'gap-16'
  };

  const classes = [
    'grid',
    colClasses[cols] || 'grid-cols-1',
    mdCols ? `md:grid-cols-${mdCols}` : '',
    lgCols ? `lg:grid-cols-${lgCols}` : '',
    gapClasses[gap] || 'gap-4',
    className
  ].filter(Boolean).join(' ');

  return (
    <Box className={classes} {...props}>
      {children}
    </Box>
  );
}
