import React from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogContentText,
    Box,
    Typography,
    useTheme,
} from '@mui/material';

const ConfirmationDialog = ({ open, onClose }) => {
    const theme = useTheme();

    return (
        <Dialog
            open={open}
            onClose={onClose}
            maxWidth="sm"
            fullWidth
            PaperProps={{
                sx: {
                    width: '525px',
                    height: '358px',
                    maxWidth: '100%',
                    maxHeight: '100%',
                    borderRadius: '12px',
                    overflow: 'hidden'
                }
            }}
        >
            <Box sx={{
                p: 3,
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <Box sx={{
                    position: 'relative',
                    width: 100,
                    height: 100,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    mb: 3
                }}>
                    <Box sx={{
                        position: 'absolute',
                        backgroundColor: '#F5F8FF',
                        width: '100%',
                        height: '100%',
                        borderRadius: '50%',
                        zIndex: 0,
                    }} />
                    <Box sx={{
                        width: 80,
                        height: 80,
                        borderRadius: '50%',
                        backgroundColor: '#E9EFFF',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        zIndex: 1,
                    }}>
                        <img
                            src='/images/createProfile/Successful.png'
                            style={{
                                width: 40,
                                height: 40,
                                objectFit: 'contain',
                            }}
                            alt="Success icon"
                        />
                    </Box>
                </Box>

                <DialogTitle sx={{ p: 0 }}>
                    <Typography
                        variant="h4"
                        component="div"
                        sx={{
                            fontWeight: 600,
                            fontSize: '28px',
                            lineHeight: '1.2',
                            textAlign: 'center'
                        }}
                    >
                        Register successful!
                    </Typography>
                </DialogTitle>

                <DialogContent sx={{ p: 0, mt: 2 }}>
                    <DialogContentText sx={{
                        textAlign: 'center',
                        fontSize: '16px',
                        fontWeight: 500,
                        color: theme.palette.text.secondary
                    }}>
                        Congratulations! You have registered your restaurant successfully on our platform
                    </DialogContentText>
                </DialogContent>
            </Box>
        </Dialog>
    );
};

export default ConfirmationDialog;