import { useSx } from '@/hooks';
import { Box, BoxProps } from '@mui/material';
import { ForwardedRef, forwardRef } from 'react';

type ILayoutWrapperProps = BoxProps;

const LayoutWrapper = forwardRef((props: ILayoutWrapperProps, ref: ForwardedRef<HTMLElement>) => {
  const sx = useSx(props, { display: 'flex', width: '100%' });

  return (
    <Box ref={ref} {...props} sx={sx}>
      {props.children}
    </Box>
  );
});

export { LayoutWrapper };