import { Box, useTheme } from '@mui/material';

/** Darker green for completed register steps (matches PAY button hover). */
export const REGISTER_STEP_COMPLETED_COLOR = '#488F52';

export const registerStepStyle = {
  width: { lg: '40%', md: '70%', xs: '100%' },
  boxShadow: 1,
  backgroundColor: '#FFFFFF',
  padding: 2,
  '& .MuiStepLabel-label': { color: '#424242' },
  '& .MuiStepConnector-line': { borderColor: '#9E9E9E' },
  '& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line': {
    borderColor: REGISTER_STEP_COMPLETED_COLOR,
  },
  '& .MuiStepConnector-root.Mui-active .MuiStepConnector-line': {
    borderColor: 'warning.main',
  },
};

const RegisterStepIcon = ({ active, completed, className, icon }) => {
  const theme = useTheme();
  let circleColor = '#757575';
  let textColor = '#FFFFFF';

  if (completed) {
    circleColor = REGISTER_STEP_COMPLETED_COLOR;
  } else if (active) {
    circleColor = theme.palette.warning.main;
    textColor = '#1A1A1A';
  }

  return (
    <Box
      className={className}
      sx={{
        width: '2rem',
        height: '2rem',
        borderRadius: '50%',
        backgroundColor: circleColor,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: textColor,
        fontSize: '1rem',
        fontWeight: 600,
        lineHeight: 1,
      }}
    >
      {icon}
    </Box>
  );
};

export default RegisterStepIcon;