import { useTheme } from "@mui/material";
import MobileStepper from "@mui/material/MobileStepper";

interface Props {
  activeStep: number;
  steps: number;
}

export default function ProgressMobileStepper({ activeStep, steps }: Props) {
  const theme = useTheme();

  return (
    <MobileStepper
      variant="progress"
      steps={steps + 1}
      position="static"
      activeStep={activeStep}
      sx={{
        width: "100%",
        padding: "10px 0 0",
        background: "transparent",
        "& .MuiLinearProgress-root": {
          height: "4px",
          background: theme.palette.primary.light,
          width: "100%",
          opacity: 0.5,
        },
        "& .MuiLinearProgress-bar": {
          background: theme.palette.primary.main,
          opacity: 1,
        },
      }}
      nextButton={<></>}
      backButton={<></>}
    />
  );
}