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

// Define the props our component will accept
interface FlexBoxProps extends BoxProps {
  direction?: 'row' | 'column';
  justify?: string;
  align?: string;
}

export const FlexBox = styled(Box, {
  // Do not forward these custom props to the DOM element
  shouldForwardProp: (prop) =>
    prop !== 'direction' && prop !== 'justify' && prop !== 'align',
})<FlexBoxProps>(
  ({ direction = 'row', justify = 'flex-start', align = 'stretch' }) => ({
    display: 'flex',
    flexDirection: direction,
    justifyContent: justify,
    alignItems: align,
  }),
);
