import React from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogContentText,
    DialogActions,
    Button,
    Box,
    Typography,
    useTheme,
    Divider
} from '@mui/material';
import EditIcon from '@mui/icons-material/Edit'; 
const ConfirmationDialog = ({ open, onClose, onConfirm }) => {
    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: '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 have registered your restaurant successfully on our platform
                        </DialogContentText>
                    </DialogContent>
           
<DialogActions
  sx={{
    p: 0,
    px: 3,
    pt: 2,
    flexDirection: 'column',
    gap: 2,
  }}
>
  {/* الزر الأول - Filled */}
  <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,
      },
    }}
  >
    View Profile
  </Button>

  {/* الزر الثاني - Outlined + أيقونة Edit */}
  <Button
    variant="outlined"
    fullWidth
    onClick={onClose}
    startIcon={<EditIcon sx={{ color: '#00081D' }} />}
    sx={{
      fontWeight: 600,
      fontSize: '16px',
      height: '48px',
      borderRadius: '50px',
      textTransform: 'none',
      borderColor: '#E6E7EA',
      color: '#00081D',
      '&:hover': {
        backgroundColor: '#FAFAFA',
        borderColor: '#E6E7EA',
      },
    }}
  >
    Edit Profile
  </Button>
</DialogActions>
            </Box>
        </Dialog>
    );
};

export default ConfirmationDialog;