frontPanel/src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx

import { Box, useMediaQuery, useTheme } from "@mui/material";
import { FC } from "react";
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
import { Item } from "./Item/Item";
import { someItems } from "../../mocks/MockData";

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

export const IntegrationStep6: FC<IntegrationStep6Props> = ({
  handlePrevStep,
  handleNextStep,
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  return (
    <Box
      sx={{
        marginTop: "20px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        height: "100%",
        flexGrow: 1,
      }}
    >
      <Box
        sx={{
          marginTop: "20px",
          width: "100%",
          height: "420px",
          borderRadius: "10px",
          padding: "10px",
          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
          display: "flex",
          overflowY: "auto",
          flexWrap: "wrap",
        }}
      >
        {/*TODO разобраться что за сущность и какая у нее логика*/}
        {someItems &&
          someItems.map((item) => (
            <Item title={item} onAddBtnClick={() => {}} />
          ))}
      </Box>

      <Box
        sx={{
          marginTop: "20px",
          alignSelf: "end",
          lineHeight: "1",
        }}
      >
        <StepButtonsBlock
          onSmallBtnClick={handlePrevStep}
          onLargeBtnClick={handleNextStep}
        />
      </Box>
    </Box>
  );
};