import React from 'react';
import { Box } from './Box';

interface GridItemProps {
  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({ children, colSpan, mdSpan, lgSpan, className = '' }: GridItemProps) {
  const spanClasses = [
    colSpan ? `col-span-${colSpan}` : '',
    mdSpan ? `md:col-span-${mdSpan}` : '',
    lgSpan ? `lg:col-span-${lgSpan}` : '',
    className
  ].filter(Boolean).join(' ');

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