import { FC } from "react";
import { Dialog, IconButton, Typography, useMediaQuery, useTheme, Box } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { Quiz } from "@/model/quiz/quiz";

type PostbackModalProps = {
  isModalOpen: boolean;
  handleCloseModal: () => void;
  companyName: string | null;
  quiz: Quiz;
};

export const PostbackModal: FC<PostbackModalProps> = ({ 
  isModalOpen, 
  handleCloseModal, 
  companyName, 
  quiz 
}) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <Dialog
      open={isModalOpen}
      onClose={handleCloseModal}
      fullWidth
      PaperProps={{
        sx: {
          maxWidth: isTablet ? "100%" : "919px",
          height: "658px",
          borderRadius: "12px",
        },
      }}
    >
      <Box>
        <Box
          sx={{
            width: "100%",
            height: "68px",
            backgroundColor: theme.palette.background.default,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            padding: "0 20px",
          }}
        >
          <Typography
            sx={{
              fontSize: isMobile ? "20px" : "24px",
              fontWeight: "500",
              color: theme.palette.grey2.main,
            }}
          >
            Интеграция с {companyName ? companyName : "Postback"}
          </Typography>
          <IconButton onClick={handleCloseModal}>
            <CloseIcon />
          </IconButton>
        </Box>
        <Box
          sx={{
            padding: "20px",
            height: "calc(100% - 68px)",
            overflow: "auto",
          }}
        >
          <Typography variant="body1">
            Интеграция с Postback находится в разработке.
          </Typography>
        </Box>
      </Box>
    </Dialog>
  );
}; 