import { ReactNode } from 'react';
import { Box } from './primitives/Box';
import { Grid } from './primitives/Grid';
import { Stack } from './primitives/Stack';

/**
 * WARNING: DO NOT VIOLATE THE PURPOSE OF THIS COMPONENT.
 * 
 * Layout is a high-level component for page or section layouts.
 * It should use Grid or Stack primitives internally.
 * 
 * If you need a specific layout pattern, create a new component.
 */

interface LayoutProps {
  children: ReactNode;
  padding?: string;
  gap?: string;
  grid?: boolean;
  gridCols?: 1 | 2 | 3 | 4;
  flex?: boolean;
  flexCol?: boolean;
  items?: 'start' | 'center' | 'end' | 'stretch';
  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
}

export function Layout({ 
  children, 
  padding = 'p-6',
  gap = 'gap-4',
  grid = false,
  gridCols = 1,
  flex = false,
  flexCol = false,
  items = 'start',
  justify = 'start'
}: LayoutProps) {
  if (grid) {
    return (
      <Grid 
        cols={gridCols as any} 
        className={`${padding} ${gap}`}
      >
        {children}
      </Grid>
    );
  }
  
  if (flex) {
    return (
      <Stack 
        direction={flexCol ? 'col' : 'row'} 
        align={items} 
        justify={justify} 
        className={`${padding} ${gap}`}
      >
        {children}
      </Stack>
    );
  }
  
  return (
    <Box className={`${padding} ${gap}`}>
      {children}
    </Box>
  );
}