import PropTypes from 'prop-types'
import Snackbar from '@mui/material/Snackbar'
import Alert from '@mui/material/Alert'

export default function AuthAlert({isOpen, setIsOpen, message, severity}) {
  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }

    setIsOpen(false)
  }

  return (
    <div>
      <Snackbar open={isOpen} autoHideDuration={6000} onClose={handleClose}>
        <Alert
          severity={severity}
          variant='filled'
          sx={{width: '100%'}}
          onClose={handleClose}
        >
          {message}
        </Alert>
      </Snackbar>
    </div>
  )
}

AuthAlert.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  setIsOpen: PropTypes.func.isRequired,
  message: PropTypes.string.isRequired,
  severity: PropTypes.string.isRequired
}