import * as React from "react";
import { Box } from "@mui/material";
import Users from "./Users";
import Promocode from "./Promocode";
import Support from "./Support";
import Tariffs from "./Tariffs";


export interface MWProps {
  section: number
}

const Content: React.FC<MWProps> = ({ section }) =>  {
  const componentsArray = [ <Users />, <Promocode />, <Support />, <Tariffs /> ];

  return (
    <React.Fragment>
      <Box sx={{
        width: "100%",
        height: "calc(100vh - 85px)",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        overflow: "auto",
        overflowY: "auto",
        padding: "60px"
      }}>
        
        { componentsArray[ section ] }
      </Box>
    </React.Fragment>
  );
}


export default Content;