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

export interface GroupProps {
  children: ReactNode;
  direction?: 'row' | 'col' | 'column';
  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
  gap?: number;
  wrap?: boolean;
  fullWidth?: boolean;
}

export const Group = ({
  children,
  direction = 'row',
  align = 'center',
  justify = 'start',
  gap = 3,
  wrap = false,
  fullWidth = false,
}: GroupProps) => {
  const finalDirection = direction === 'column' ? 'col' : direction;

  return (
    <Box
      display="flex"
      flexDirection={finalDirection}
      alignItems={align}
      justifyContent={justify}
      gap={gap}
      flexWrap={wrap ? 'wrap' : 'nowrap'}
      fullWidth={fullWidth}
    >
      {children}
    </Box>
  );
};