// ** React Imports
import { useContext, useEffect } from 'react';

// ** Next Imports
import { useRouter } from 'next/router';

// ** MUI Components
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import MuiCard from '@mui/material/Card';
import MuiFormControlLabel from '@mui/material/FormControlLabel';

// ** Icons Imports

// ** Configs

// ** Layout Import
import BlankLayout from 'src/@core/layouts/BlankLayout';

// ** Demo Imports
import { Stack } from '@mui/material';
import { AuthContext } from 'src/contexts/auth';

// ** Styled Components
const Card = styled(MuiCard)(({ theme }) => ({
  [theme.breakpoints.up('sm')]: { width: '28rem' },
}));

const LinkStyled = styled('a')(({ theme }) => ({
  fontSize: '0.875rem',
  textDecoration: 'none',
  color: theme.palette.primary.main,
}));

const FormControlLabel = styled(MuiFormControlLabel)(({ theme }) => ({
  '& .MuiFormControlLabel-label': {
    fontSize: '0.875rem',
    color: theme.palette.text.secondary,
  },
}));

const LogoutPage = () => {
  const router = useRouter();
  const { performLogout } = useContext(AuthContext);

  useEffect(() => {
    performLogout();

    router.push('/');
  }, []);
  return (
    <Box className="content-center">
      <Stack direction="row" justifyContent="center" alignItems="center">
        logging you out
      </Stack>
    </Box>
  );
};

LogoutPage.getLayout = page => <BlankLayout>{page}</BlankLayout>;

export default LogoutPage;
