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

/**
 * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS PRIMITIVE.
 * 
 * GridItem is for items inside a Grid container.
 * 
 * - DO NOT add positioning props (absolute, top, zIndex).
 * - DO NOT add background/border props.
 * 
 * If you need a more specific layout, create a new component in apps/website/components.
 */

export interface GridItemProps<T extends ElementType = 'div'> extends Omit<BoxProps<T>, 'children'> {
  children?: React.ReactNode;
  colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  mdSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  lgSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
  className?: string;
}

export function GridItem<T extends ElementType = 'div'>({ children, colSpan, mdSpan, lgSpan, className = '', ...props }: GridItemProps<T>) {
  const spanClasses = [
    colSpan ? `col-span-${colSpan}` : '',
    mdSpan ? `md:col-span-${mdSpan}` : '',
    lgSpan ? `lg:col-span-${lgSpan}` : '',
    className
  ].filter(Boolean).join(' ');

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