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

export interface NavGroupProps {
  children: ReactNode;
  direction?: 'horizontal' | 'vertical';
  gap?: number;
  align?: 'start' | 'center' | 'end';
}

export const NavGroup = ({ 
  children, 
  direction = 'horizontal', 
  gap = 4,
  align = 'center'
}: NavGroupProps) => {
  return (
    <Box 
      as="nav"
      display="flex" 
      flexDirection={direction === 'horizontal' ? 'row' : 'col'} 
      gap={gap} 
      alignItems={align}
      justifyContent={direction === 'horizontal' ? 'center' : 'start'}
    >
      {children}
    </Box>
  );
};