import PropTypes from 'prop-types'
import {
  Button,
  Dialog,
  Typography,
  DialogContent,
  DialogTitle,
  DialogActions
} from '@mui/material'

export default function Alet({esOuve, meteEsOuve, handleKonfime}) {
  const handleFemen = () => {
    meteEsOuve(false)
  }

  return (
    <div>
      <Dialog
        open={esOuve}
        aria-labelledby='alet-dialog'
        aria-describedby='alet-deskripsyon'
        onClose={handleFemen}
      >
        <DialogTitle style={{textAlign: 'center'}} id='alet-dialog'>Dékoneksyon</DialogTitle>
        <DialogContent>
          <Typography id='alet-deskripsyon'>
            Souhaitez-vous vraiement vous déconnecter ?
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button fullWidth autoFocus color='primary' variant='contained' onClick={handleFemen}>
            Annuler
          </Button>
          <Button fullWidth color='secondary' variant='contained' onClick={handleKonfime}>
            Se déconnecter
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  )
}

Alet.propTypes = {
  esOuve: PropTypes.bool.isRequired,
  meteEsOuve: PropTypes.func.isRequired,
  handleKonfime: PropTypes.func.isRequired
}