import * as React from "react";
import { Box, Typography, Button } from "@mui/material";
import theme from "../../../../../theme";


export interface MWProps {
  openModal: (type:number, num: number) => void
}

const Templater: React.FC<MWProps> = ({ openModal }) =>  {
  return (
    <React.Fragment>
      <Typography 
        variant="subtitle1"  
        sx={{
          width: "90%",
          height: "60px",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          color: theme.palette.secondary.main
      }}>
        Шаблонизатор документов
      </Typography>

      <Box sx={{ 
        marginTop: "35px",
        display: "grid",
        gridTemplateColumns: "repeat(2, 1fr)",
        gridGap: "20px",
        marginBottom: "120px",
      }}>
        <Button 
          variant = "contained"
          onClick={ () => openModal(1, 1) }
          sx={{
            backgroundColor: theme.palette.menu.main,
            fontWeight: "normal",
            fontSize: "17px",
            padding: '11px 25px',
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main
            }
          }}>
            Создать тариф на время
        </Button>
        <Button 
          variant = "contained"
          onClick={ () => openModal(1, 0) }
          sx={{
            backgroundColor: theme.palette.menu.main,
            padding: '11px 25px',
            fontWeight: "normal",
            fontSize: "17px",
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main
            }
          }}>
            Создать тариф на объем
        </Button>
        <Button 
          variant = "contained"
          onClick={ () => openModal(1, 2) }
          sx={{
            backgroundColor: theme.palette.menu.main,
            padding: '11px 25px',
            fontWeight: "normal",
            fontSize: "17px",
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main
            }
          }}>
            Создать тариф на гигабайты
        </Button>
        <Button 
          variant = "contained"
          sx={{
            backgroundColor: theme.palette.menu.main,
            padding: '11px 25px',
            fontWeight: "normal",
            fontSize: "17px",
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main
            }
          }}>
            Изменить тариф 
        </Button>
      </Box>
    </React.Fragment>
  );
}


export default Templater;