import React from 'react';
import { Box, TextField, Typography, Button, useTheme } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const Congratulations = ({ emailOrPhone, setEmailOrPhone }) => {
    const navigate = useNavigate();
    const theme = useTheme();
    return (
        <Box
            sx={{
                width: '100%',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                // overflow: 'auto',
                scrollbarWidth: 'none',
                '&::-webkit-scrollbar': {
                    display: 'none',
                },

                mt: { xs: 4, sm: 8, md: 2 } // هامش علوي متجاوب
            }}
        >
            <Box
                sx={{
                    marginTop: '90px',
                    position: 'relative',
                    width: 132,
                    height: 132,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
            >
                <Box
                    sx={{
                        position: 'absolute',
                        width: 139,
                        height: 139,
                        borderRadius: '50%',
                        top: '50%',
                        left: '50%',
                        transform: 'translate(-50%, -50%)',
                        zIndex: 0,
                        backgroundColor: '#FAFAFA'
                    }}
                />
                <Box
                    sx={{

                        width: 120,
                        height: 120,
                        backgroundColor: '#E9EFFF',
                        borderRadius: '50%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        zIndex: 1,
                    }}
                >
                    <img
                        src="/images/hand.png"
                        style={{ width: 60, height: 60, objectFit: 'contain' }}
                    />
                </Box>

            </Box>
            <Typography
                variant="h4"
                fontWeight={700}
                marginTop={3}
                marginBottom={2}
                sx={{
                    fontSize: {
                        xs: '1.8rem',
                        sm: '2rem',
                        md: '2.2rem'
                    }
                }}
            >
                Congratulations!
            </Typography>

            <Typography
                variant="h4"
                fontWeight={400}
                width='390px'
                marginLeft='20px'
                sx={{
                    color: '#5F6868',
                    fontSize: {
                        xs: '0.8rem',
                        md: '1.1rem'
                    }
                }}
            >
                Your password has been successfully updated. Thank you for choosing our service
            </Typography>


            {/* زر التنقل إلى صفحة تسجيل الدخول */}
            <Button
                variant="contained"
                fullWidth
                onClick={() => navigate('/login')}
                sx={{
                    marginTop: '20px',
                    color: 'white',
                    backgroundColor: theme.palette.primary.main,
                    borderRadius: '30px',
                    textTransform: 'none',
                    fontWeight: 500,
                    fontSize: '16px',
                    height: '52px',
                    padding: '12px',
                    maxWidth: '390px',
                    px: 2,
                    '&:hover': {
                        backgroundColor: theme.palette.primary.hover,
                        transition: 'all 0.4s ease'
                    }
                }}
            >
                Login
            </Button>
        </Box>
    );
};

export default Congratulations;