import React from 'react'
import Modal from '@mui/material/Modal'
import Box from '@mui/material/Box'

interface IRedirectModal {
  message: string
  onClickOk: () => void
}

const style: React.CSSProperties = {
  position: 'absolute',
  top: '10%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  minWidth: 480,
  backgroundColor: '#e3e3e3',
  border: '1px solid white',
  outline: 'none',
  padding: '14px',
  maxHeight: '85vh',
  overflow: 'auto',
}

export const RedirectModal = ({
  message = 'Your cart has expired. Please click on "OK" to return to the ticket selection page.',
  onClickOk = () => {},
}: IRedirectModal) => {
  return (
    <Modal
      open={true}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
      className="redirect-modal"
    >
      <Box style={style}>
        <p>{message}</p>
        <div className="footer">
          <button onClick={onClickOk}>OK</button>
        </div>
      </Box>
    </Modal>
  )
}