import Modal from '@mui/material/Modal'
import { Box, Typography } from '@mui/material'
import React, { useState } from 'react'

// check if this modal can be reused by passing in the text
const style = {
  padding: 5,
  position: 'absolute',
  top: '30%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  backgroundColor: 'white',
  border: '1px solid black',
  boxShadow: 24,
}

// eslint-disable-next-line react/prop-types
const LoginErrorModal = ({ msg }) => {
  const [open, setOpen] = useState(true)
  console.log(open)
  const handleClose = () => {
    setOpen(false)
    window.location.reload(false);
  }
  return (
    <Box>
      <Modal
      onClose={handleClose}
      open={open}>
        <Typography variant="h6" sx={style}>
            {msg}
        </Typography>
      </Modal>
    </Box>
  )
}

export default LoginErrorModal