import { Box, styled, type BoxProps } from '@mui/material';

interface StackProps extends BoxProps {
  direction?: 'row' | 'column';
  spacing?: number; // Spacing factor (multiplied by theme.spacing)
  align?: string;
}

export const Stack = styled(Box, {
  shouldForwardProp: (prop) =>
    prop !== 'direction' && prop !== 'spacing' && prop !== 'align',
})<StackProps>(
  ({ theme, direction = 'column', spacing = 2, align = 'stretch' }) => ({
    display: 'flex',
    flexDirection: direction,
    alignItems: align,
    gap: theme.spacing(spacing),
  }),
);
