// Grid Component Specification
// Framework-agnostic 12-column grid system

export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

export interface GridProps {
  columns?: GridColumns;
  gap?: string | number;
  className?: string;
  children?: unknown;
}

export interface GridItemProps {
  colSpan?: GridColumns | { sm?: GridColumns; md?: GridColumns; lg?: GridColumns; xl?: GridColumns };
  rowSpan?: number;
  offset?: GridColumns;
  className?: string;
  children?: unknown;
}

/**
 * Grid Component Interface
 * 
 * Usage example (React):
 * ```tsx
 * <Grid columns={12} gap={4}>
 *   <GridItem colSpan={8}>
 *     <MainContent />
 *   </GridItem>
 *   <GridItem colSpan={4}>
 *     <Sidebar />
 *   </GridItem>
 * </Grid>
 * 
 * <Grid columns={12} gap={4}>
 *   <GridItem colSpan={{ sm: 12, md: 6, lg: 4 }}>
 *     <Card />
 *   </GridItem>
 * </Grid>
 * ```
 */
export interface GridComponent {
  props: GridProps;
  render(): unknown;
}

export interface GridItemComponent {
  props: GridItemProps;
  render(): unknown;
}

