import React, { ReactNode } from 'react';
import { Box } from './primitives/Box';

export interface GridProps {
  children: ReactNode;
  cols?: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
  gap?: number;
  fullWidth?: boolean;
}

export const Grid = ({ 
  children, 
  cols = 1, 
  gap = 0,
  fullWidth = false
}: GridProps) => {
  const getGridColsClass = (value: number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }) => {
    if (typeof value === 'number') return `grid-cols-${value}`;
    const classes = [];
    if (value.base) classes.push(`grid-cols-${value.base}`);
    if (value.sm) classes.push(`sm:grid-cols-${value.sm}`);
    if (value.md) classes.push(`md:grid-cols-${value.md}`);
    if (value.lg) classes.push(`lg:grid-cols-${value.lg}`);
    if (value.xl) classes.push(`xl:grid-cols-${value.xl}`);
    return classes.join(' ');
  };

  return (
    <Box 
      display="grid" 
      className={getGridColsClass(cols)}
      gap={gap} 
      fullWidth={fullWidth}
    >
      {children}
    </Box>
  );
};