import React, { ReactNode } from 'react';

interface LayoutProps {
  children: ReactNode;
  className?: string;
  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, 
  className = '',
  padding = 'p-6',
  gap = 'gap-4',
  grid = false,
  gridCols = 1,
  flex = false,
  flexCol = false,
  items = 'start',
  justify = 'start'
}: LayoutProps) {
  const baseClasses = [padding, gap, className];
  
  if (grid) {
    const gridColsMap = {
      1: 'grid-cols-1',
      2: 'grid-cols-2',
      3: 'grid-cols-3',
      4: 'grid-cols-4'
    };
    baseClasses.push('grid', gridColsMap[gridCols]);
  } else if (flex) {
    baseClasses.push('flex');
    if (flexCol) baseClasses.push('flex-col');
    
    const itemsMap = {
      start: 'items-start',
      center: 'items-center',
      end: 'items-end',
      stretch: 'items-stretch'
    };
    baseClasses.push(itemsMap[items]);
    
    const justifyMap = {
      start: 'justify-start',
      center: 'justify-center',
      end: 'justify-end',
      between: 'justify-between',
      around: 'justify-around'
    };
    baseClasses.push(justifyMap[justify]);
  }
  
  const classes = baseClasses.filter(Boolean).join(' ');
  
  return <div className={classes}>{children}</div>;
}