import React from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogContentText,
    DialogActions,
    Button,
    Box,
    Typography,
    useTheme,
    CircularProgress
} from '@mui/material';
const ConfirmationDialog = ({ open, onClose, onConfirm, loading }) => {

    const theme = useTheme();
    return (
        <Dialog
            open={open}
            onClose={onClose}
            maxWidth="sm"

            fullWidth
            PaperProps={{
                sx: {
                    width: '525px',
                    height: '350px',
                    maxWidth: '100%',
                    maxHeight: '100%',
                    borderRadius: '12px',
                    overflow: 'hidden'
                }
            }}
        >
            <Box sx={{

                p: 3,
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between',
            }}>
                <Box
                    sx={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        gap: 2,
                        mb: 3,
                        ml: -5,
                    }}
                >
                    {/* الدوائر */}
                    <Box sx={{
                        position: 'relative',
                        width: 100,
                        height: 100,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}>
                        {/* الدائرة الخلفية */}
                        <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'
                            }}
                        >
                            Register successful!
                        </Typography>
                    </DialogTitle>
                </Box>
                <DialogContent sx={{ p: 0 }}>
                    <DialogContentText sx={{
                        textAlign: 'center',
                        mb: 0,
                        fontSize: '16px',
                        fontWeight: 500,
                        color: theme.palette.text.secondary
                    }}>
                        Congratulations! you well register your restaurant successfully on our platform
                    </DialogContentText>
                </DialogContent>

                <DialogActions
                    sx={{
                        p: 0,
                        px: 3,
                        pt: 2,
                        flexDirection: 'column',
                        gap: 2,
                    }}
                >
               
                    <Button
                        variant="contained"
                        fullWidth
                        onClick={onClose}
                        sx={{
                            fontWeight: 600,
                            fontSize: '16px',
                            height: '48px',
                            borderRadius: '50px',
                            textTransform: 'none',
                            color: 'white',
                            backgroundColor: theme.palette.primary.main,
                            '&:hover': {
                                backgroundColor: theme.palette.primary.dark,
                            },
                        }}
                    >
                        Censel
                    </Button>

                    {/* الزر الأول - Filled */}
                    <Button
                        variant="contained"
                        fullWidth
                        onClick={onConfirm}
                        disabled={loading} 
                        sx={{
                            fontWeight: 600,
                            fontSize: '16px',
                            height: '48px',
                            borderRadius: '50px',
                            textTransform: 'none',
                            color: 'white',
                            backgroundColor: theme.palette.primary.main,
                            '&:hover': {
                                backgroundColor: theme.palette.primary.dark,
                            },
                        }}
                    >
                        {loading ? (
                            <CircularProgress size={24} sx={{ color: 'white' }} />
                        ) : (
                            'Submit'
                        )}
                    </Button>
                </DialogActions>
            </Box>
        </Dialog>
    );
};

export default ConfirmationDialog;