import React from 'react';
import { Box, Typography, Stack, Button ,useTheme } from '@mui/material';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

const steps = [
  {
    title: 'Forget Password',
    description: 'Provide an email to change your password',
    icon: '/images/icons/key.png',
  },
  {
    title: 'Verify your email',
    description: 'Enter your otp verification',
    icon: '/images/icons/email.png',
  },
  {
    title: 'Create a new password',
    description: 'Create your a new password',
    icon: '/images/icons/pen.png',
  },
  {
    title: 'Welcome to KitchPlus app',
    description: 'Get up and running in 3 minutes',
    icon: '/images/icons/rocket.png',
  },
];

const Side = ({ currentStepIndex, onNext, onBack }) => {
    const theme = useTheme();
  return (
    <Box
      sx={{
        height: { xs: '100vh', sm: '130vh', md: '87.5vh' },
        backgroundColor: '#FAFAFA',
        px: { xs: 2, sm: 4 },
        py: 5,
        display: { xs: 'none', sm: 'block' },
        position: 'relative',
      }}
    >
      <Typography variant="h6" fontWeight={700} mb={2}>
        Step for change your password
      </Typography>
      <Typography variant="body2" color="text.secondary" mb={4}>
        Instructions for secure password modification. Follow simple steps for password change.
      </Typography>

      <Stack spacing={6} position="relative" sx={{ ml: 3 }}>
        {steps.map((step, index) => (
          <Box key={index} display="flex" alignItems="flex-start" gap={2} position="relative">
            {index !== steps.length - 1 && (
              <Box
                sx={{
                  position: 'absolute',
                  left: '3.8vh',
                  top: '6vh',
                  width: '2px',
                  height: 'calc(100% + 24px)',
                  backgroundColor: '#e0e0e0',
                  zIndex: 0,
                }}
              />
            )}
            <Box
              sx={{
                position: 'relative',
                width: 50,
                height: 53,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Box
                sx={{
                  position: 'absolute',
                  width: 60,
                  height: 63,
                  borderRadius: '50%',
                  top: '50%',
                  left: '50%',
                  transform: 'translate(-50%, -50%)',
                  zIndex: 0,
                  backgroundImage:
                    index === currentStepIndex
                      ? 'linear-gradient(0deg, #FF914D, #F3F3F3 )'
                      : 'none',
                  backgroundColor: index === currentStepIndex ? 'transparent' : '#F3F3F3',
                }}
              />
              <Box
                sx={{
                  width: 50,
                  height: 53,
                  backgroundColor: '#FFFFFF',
                  borderRadius: '50%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  zIndex: 1,
                }}
              >
                <img
                  src={step.icon}
                  alt={step.title}
                  style={{ width: 24, height: 24, objectFit: 'contain' }}
                />
              </Box>
            </Box>

            <Box>
              <Typography variant="subtitle1" sx={{ fontSize: '16px', fontWeight: 600 }}>
                {step.title}
              </Typography>
              <Typography variant="body2" sx={{ color: '#A0A0A0', fontSize: '12px', fontWeight: 500 }}>
                {step.description}
              </Typography>
            </Box>
          </Box>
        ))}
      </Stack>

      {/* ... (بقية محتوى الـ Side كما هو بدون تغيير) ... */}

      {/* أزرار التنقل */}
      <Box
        sx={{
          position: 'absolute',
          bottom: 2,
          left: '50%',
          transform: 'translateX(-50%)',
          width: '90%',
          maxWidth: 600,
          display: 'flex',
          justifyContent: 'space-between',
          px: 2,
        }}
      >

        {/* Back */}
        <Button
          variant="text"
          startIcon={<ArrowBackIosIcon sx={{ fontSize: '16px' }} />}
          onClick={onBack}
          disabled={currentStepIndex === 0}
          sx={{
            color: currentStepIndex === 0 ? '#C2C2C2' : '#6B7283',
            minWidth: '100px',
            fontWeight: 400,
            fontSize: '16px',
            textTransform: 'none',
            '&:hover': {
              backgroundColor: 'transparent',
              color:  theme.palette.primary.main
            }
          }}
        >
          Back
        </Button>
        {/* Next */}
        <Button
          variant="text"
          endIcon={<ArrowForwardIosIcon sx={{ fontSize: '16px' }} />}
          onClick={onNext}
          disabled={currentStepIndex === steps.length - 1}
          sx={{
            color: currentStepIndex === steps.length - 1 ? '#C2C2C2' : '#6B7283',
            minWidth: '100px',
            fontWeight: 400,
            fontSize: '16px',
            textTransform: 'none',
            '&:hover': {
              backgroundColor: 'transparent',
              color:  theme.palette.primary.main,
              transition: 'all 0.4s ease'
            }
          }}
        >
          Next
        </Button>
      </Box>
    </Box>
  );
};

export default Side;