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

interface GridProps extends HTMLAttributes<HTMLElement> {
  children: ReactNode;
  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12;
  gap?: number;
  className?: string;
}

export function Grid({ 
  children, 
  cols = 1, 
  gap = 4,
  className = '',
  ...props 
}: GridProps) {
  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',
    gapClasses[gap] || 'gap-4',
    className
  ].filter(Boolean).join(' ');

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