import { Box, Button, CSSObject, Modal, Typography } from "@mui/material";
import { FC } from "react";

interface Iprops {
  opened: boolean;
  onClose: () => void;
}

const style: CSSObject = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 620,
  minHeight: 251,
  bgcolor: "background.paper",
  borderRadius: "12px",
  boxShadow: "24",
};

export const ReallyChangingModal: FC<Iprops> = ({ opened, onClose }) => (
  <Modal open={opened} onClose={onClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description">
    <Box sx={style}>
      <Box sx={{ background: "#F2F3F7", padding: "20px 21px", borderRadius: "12px 12px 0px 0px" }}>
        <Typography sx={{ fontSize: "24px", fontWeight: "500", color: "#4D4D4D" }}>Точно меняем?</Typography>
      </Box>

      <Box sx={{ padding: "20px" }}>
        <Typography sx={{ fontSize: "18px", marginBottom: "30px" }}>
          Если поменять формат этого вопроса
          <span style={{ fontWeight: "500" }}> на Варианты ответов </span>, заполненные поля в этом вопросе пропадут, а
          условия показа вопросов / результатов, зависимые от него, сбросятся.
        </Typography>

        <Box sx={{ display: "flex", alignItems: "center" }}>
          <Button
            sx={{ borderRadius: "8px", width: "285px", height: "48px", border: "1px solid #9A9AAF", color: "#9A9AAF" }}
          >
            Нет, оставить
          </Button>
          <Button sx={{ ml: "10px", width: "285px", height: "48px" }} variant="contained">
            Да, поменять
          </Button>
        </Box>
      </Box>
    </Box>
  </Modal>
);
