import PropTypes from 'prop-types';
import { alpha, Box } from '@mui/material';
import { mergeSx } from '@arcblock/ux/lib/Util/style';

// 需要父元素设置 relative position
export default function MaskOverlay({ children, ...rest }) {
  return (
    <Box
      {...rest}
      sx={mergeSx(
        {
          position: 'absolute',
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: ({ palette }) => alpha(palette.background.default, 0.75),
          backdropFilter: 'blur(3px)',
        },
        rest?.sx
      )}>
      {children}
    </Box>
  );
}

MaskOverlay.propTypes = {
  children: PropTypes.any.isRequired,
};