import Box from '@mui/material/Box';
import Button from 'react-bootstrap/Button';
import Paper from '@mui/material/Paper';
import { Container } from '@mui/material';
import Row from 'react-bootstrap/esm/Row';
import { useNavigate } from 'react-router-dom';

export default function BookingDetailsSubmissionPaper({bookingDetails}) {

  const navigateTo = useNavigate();

  return (
        <Box
            sx={{
              display: 'flex',
              flexWrap: 'wrap',
              '& > :not(style)': {
                m: 1,},
                justifyContent:"center",
                alignContent:"center",
                height: "100vh",
                width: "100vw",
                
              }
            }
        
          >
            <Paper elevation={0} sx={{width:500, height:250,}}>
            
            <Container style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
              <Container>
                    <h5 style={{marginTop:"3em"}}> Your request was successfull. Please check your email to verify. </h5>
                    <h5> Would you like to add catering to your event? </h5>
              </Container>


              <Row style={{display:"flex", marginTop:"auto",justifyContent:"center", marginBottom:"2em" }}> 
                <Button variant='primary'
                    size='lg'
                    onClick={()=> navigateTo("/catering", {state: bookingDetails} )}
                    style={{backgroundColor:'#282F38', border:"none", width:"6em", marginRight:"2em"}}
                >
                    Yes
                </Button>  
                <Button variant='primary'
                    size='lg'
                    onClick={()=> navigateTo("/feedback")}
                    style={{backgroundColor:'#282F38', border:'none', width:"6em"}}
                >
                    No
                </Button> 
              </Row>
            </Container>
            </Paper>
        </Box>
  );
}