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

export interface GridItemProps<T extends ElementType> extends BoxProps<T> {
  as?: T;
  children?: ReactNode;
  colSpan?: number | ResponsiveValue<number>;
  rowSpan?: number | ResponsiveValue<number>;
  mdSpan?: number;
  lgSpan?: number;
}

export const GridItem = forwardRef(<T extends ElementType = 'div'>(
  { 
    children, 
    colSpan,
    rowSpan,
    as,
    mdSpan,
    lgSpan,
    ...props
  }: GridItemProps<T>,
  ref: ForwardedRef<HTMLElement>
) => {
  const finalColSpan = typeof colSpan === 'object' ? { ...colSpan } : { base: colSpan };
  if (mdSpan) finalColSpan.md = mdSpan;
  if (lgSpan) finalColSpan.lg = lgSpan;

  return (
    <Box 
      as={as} 
      ref={ref}
      colSpan={finalColSpan as any}
      // rowSpan is not directly supported by Box yet, but we can add it if needed
      // or use style
      {...props}
    >
      {children}
    </Box>
  );
});

GridItem.displayName = 'GridItem';