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


import Support from "./Support";
import Error404 from "../../Error404";


export interface MWProps {
  section: number
}

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

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


export default Content;