import * as React from 'react';
import MobileStepper from '@mui/material/MobileStepper';
import {Box, Typography} from "@mui/material";
interface Props {
    desc?: string;
    activeStep?: number;
    steps?: number;
}

export default function ProgressMobileStepper({desc = 'Настройка стартовой страницы', activeStep = 1, steps = 6}:Props) {

  return (
      <Box
          sx={{
              width: '100%',
              display: 'flex',
              justifyContent: 'center',
              flexDirection: 'column',
              height: '51px',
              borderRadius: '13px',
              border: 'solid #7E2AEA 1px',
              padding: '0 0 20px 0',
              overflow: 'hidden'
          }}
      >
          <MobileStepper
              variant="progress"
              steps={steps}
              position="static"
              activeStep={activeStep}
              sx={{
                  width: '100%',
                  flexGrow: 1,
                  paddingLeft: 0,
                  '& .css-1ej0n1q-MuiLinearProgress-root-MuiMobileStepper-progress': {
                    height: '10px',
                    background: '#ffffff',
                    width: '100%'
                  },
                  '& .css-1v0msyf-MuiLinearProgress-bar1': {
                    background: '#7e2aea',
                  },
              }}
              nextButton={<></>}
              backButton={<></>}
          />
          <Box sx={{padding: '3px 3px 3px 20px'}}>
              <Typography sx={{fontWeight:400,
                  fontSize: '12px',
                  lineHeight: '14.22px'}}> Шаг {activeStep} из {steps}</Typography>
              {desc.length == 0 ? <></> : <Typography>{desc}</Typography>}
          </Box>
    </Box>
  );
}