// EmailInputSection.js
import React, { useState } from 'react';
import { Box, Button, TextField, Typography ,useTheme} from '@mui/material';

const EmailInputSection = ({ emailOrPhone, setEmailOrPhone }) => {
    const theme = useTheme();
    const [currentSlide, setCurrentSlide] = useState(0);
    const slides = [0, 1, 2, 3];

    const handleSend = () => {
        // عملية الإرسال
    };

    const handleNext = () => {
        if (currentSlide < slides.length - 1) {
            setCurrentSlide(prev => prev + 1);
        }
    };

    const handleBack = () => {
        if (currentSlide > 0) {
            setCurrentSlide(prev => prev - 1);
        }
    };
    return (
        <>
            <Box>
                <Box
                    component="img"
                    src="/image.png"
                    alt="logo"
                    sx={{
                        width: { xs: '5vh', sm: '7vh' },
                        maxWidth: { xs: '40px', sm: '80px' },
                        height: 'auto',
                        objectFit: 'contain',
                          overflow: 'auto',
                scrollbarWidth: 'none',
                '&::-webkit-scrollbar': {
                    display: 'none',
                },
                    }}
                />
            </Box>

            <Typography
                variant="h4"
                fontWeight={700}
                sx={{
                    fontSize: {
                        xs: '1.8rem',
                        sm: '2rem',
                        md: '2.2rem'
                    }
                }}
            >
                Forget Password
            </Typography>

            <Typography variant="body1" color="text.secondary">
                Enter your email to reset it and regain access to your account.
            </Typography>

            <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column', gap: 1 }}>
                <Typography
                    variant="body2"
                    color="black"
                    sx={{
                        fontWeight: '500',
                        fontSize: '16px'
                    }}
                >
                    Email/Phone
                </Typography>
                <TextField
                    placeholder="Enter your email"
                    type="email"
                    variant="outlined"
                    fullWidth
                    value={emailOrPhone}
                    onChange={(e) => setEmailOrPhone(e.target.value)}
                    sx={{
                        '& input': {
                            fontWeight: 500,
                            fontSize: '15px'
                        },
                        '& input::placeholder': {
                            color: '#969BA7'
                        },
                        '& .MuiOutlinedInput-root': {
                            borderRadius: '10px',
                            transition: '0.3s',
                            '&.Mui-focused fieldset': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
                                borderColor: '#FF914D',
                                boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
                            }
                        },
                        '& .MuiOutlinedInput-root.Mui-focused': {
                            borderColor: '#3f51b5',
                            boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
                        }
                    }}
                />
            </Box>

            {/* send */}
            <Button
                variant="contained"
                fullWidth
                onClick={handleSend}
                sx={{
                    color:'white',
                    backgroundColor: theme.palette.primary.main,
                    borderRadius: '30px',
                    textTransform: 'none',
                    fontWeight: 600,
                    fontSize: '16px',
                    height: '48px',
                    '&:hover': {
                        backgroundColor: theme.palette.primary.hover ,
                        transition: 'all 0.4s ease'
                    }
                }}
            >
                Send
            </Button>

            <Typography
                textAlign="center"
                fontWeight={500}
                sx={{
                    fontSize: '16px',
                    display: 'block',
                    width: '100%',
                    mx: 'auto',
                    color: '#969BA7'
                }}
            >
                By log in, I agree to the&nbsp;
                <a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Terms of Service</a> and&nbsp;
                <a href="#" style={{ color: '#007bff', textDecoration: 'none' }}>Privacy Policy</a>
            </Typography>
        </>
    );
};

export default EmailInputSection;