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

export interface GridItemProps<T extends ElementType = 'div'> extends BoxProps<T> {
  children?: ReactNode;
  colSpan?: number | ResponsiveValue<number>;
  rowSpan?: number | ResponsiveValue<number>;
  lgSpan?: number; // Alias for colSpan.lg
}

export function GridItem<T extends ElementType = 'div'>({ 
  children, 
  colSpan, 
  rowSpan,
  lgSpan,
  ...props 
}: GridItemProps<T>) {
  const actualColSpan = lgSpan ? { base: colSpan as any, lg: lgSpan } : colSpan;

  return (
    <Box 
      colSpan={actualColSpan as any} 
      {...props}
    >
      {children}
    </Box>
  );
}