import PropTypes from 'prop-types';

// material-ui
import { Box, Grid } from '@mui/material';

// project import
const AuthCard = Loadable(lazy(() => import('./AuthCardCustom')));
//import AuthCard from './AuthCardCustom';

// assets
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const AuthBackground = Loadable(lazy(() => import('assets/images/auth/AuthBackground')));
//import AuthBackground from 'assets/images/auth/AuthBackground';

// ==============================|| AUTHENTICATION - WRAPPER ||============================== //

const AuthWrapperCustom = ({ children }) => (
  <Box sx={{ minHeight: '60vh' }}>
    <AuthBackground />
    <Grid
      container
      direction="column"
      justifyContent="center"
      alignItems="flex-start"
      sx={{
        minHeight: '90vh',
      }}
    >
      {/* <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>
        <Logo />
      </Grid> */}
      <Grid item xs={12}>
        <Grid
          item
          xs={12}
          container
          justifyContent="center"
          alignItems="flex-start"
          sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' }}}
        >   
          <Grid item>
            <AuthCard>{children}</AuthCard>
          </Grid>
        </Grid>
      </Grid>
      <Grid item xs={12} sx={{ m: 3, mt: 1 }}>
        {/* <AuthFooter /> */}
      </Grid>
    </Grid>
  </Box>
);

AuthWrapperCustom.propTypes = {
  children: PropTypes.node
};

export default AuthWrapperCustom;