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


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

const Quiz: 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) }
          sx={{
            backgroundColor: theme.palette.menu.main,
            width: "320px",
            height: "52px",
            fontWeight: "normal",
            fontSize: "17px",
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main
            }
          }}>
            Создать тариф на время
        </Button>
        <Button 
          variant = "contained"
          onClick={ () => openModal(0) }
          sx={{
            backgroundColor: theme.palette.menu.main,
            width: "320px",
            height: "52px",
            fontWeight: "normal",
            fontSize: "17px",
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main
            }
          }}>
            Создать тариф на объем
        </Button>
        <Button 
          variant = "contained"
          sx={{
            backgroundColor: theme.palette.menu.main,
            width: "320px",
            height: "52px",
            fontWeight: "normal",
            fontSize: "17px",
            "&:hover": {
              backgroundColor: theme.palette.grayMedium.main
            }
          }}>
            Изменить тариф 
        </Button>
      </Box>
    </React.Fragment>
  );
}


export default Quiz;