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

export interface ButtonGroupProps {
  children: ReactNode;
  alignment?: 'start' | 'center' | 'end' | 'between';
  gap?: Spacing;
  marginTop?: Spacing;
}

export const ButtonGroup = ({ 
  children, 
  alignment = 'start',
  gap = 4,
  marginTop = 0
}: ButtonGroupProps) => {
  const justifyContentMap = {
    start: 'start',
    center: 'center',
    end: 'end',
    between: 'between'
  };

  return (
    <Box 
      display="flex" 
      alignItems="center" 
      justifyContent={justifyContentMap[alignment] as any} 
      gap={gap as any}
      marginTop={marginTop}
    >
      {children}
    </Box>
  );
};