import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { FC } from "react";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";

type IntegrationStep3Props = {
  handlePrevStep: () => void;
  handleNextStep: () => void;
};

export const IntegrationStep3: FC<IntegrationStep3Props> = ({
  handlePrevStep,
  handleNextStep,
}) => {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Typography
        sx={{ color: "#4D4D4D", mt: "5px", mb: upMd ? "10px" : "33px" }}
      >
        step 3
      </Typography>
      <StepButtonsBlock
        handleNextStep={handleNextStep}
        handlePrevStep={handlePrevStep}
      />
    </Box>
  );
};