import { Box, Button } from '@mui/material';
import { useRouter } from 'next/dist/client/router';
import { useState } from 'react';

export default () => {
  const router = useRouter();
  const [changing_page, setChangingPage] = useState(false);

  return (
    <>
      <Box sx={{ width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: '2rem' }}>
        <Box sx={{ fontWeight: 'bold', fontSize: '1.5rem' }}>Patient Landing</Box>
      </Box>
      <Box
        sx={{
          height: '80vh',
          width: '100%',
          display: 'inline-flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Box>
          <Button
            onClick={() => {
              setChangingPage(true);
              router.push('/PatientRegister');
            }}
            variant='contained'
            disableElevation
            disabled={changing_page}
          >
            Proceed to register
          </Button>
        </Box>
      </Box>
    </>
  );
};