import * as React from "react";
import {
  Card,
  CardHeader,
  CardContent,
  SxProps,
  Theme,
  Grid,
  Modal,
  Typography,
  Button,
} from "@mui/material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { darken, lighten, styled } from "@mui/material/styles";
import { PROJECT_MODAL_STYLE } from "@/theme/colorConst";
import { useRef, useEffect, useState } from "react";
import Swal from "sweetalert2";
import styledcmp from "styled-components";

const CardWrapper = styledcmp.div`
  /* Styles for the card when not hovered */
  background-color: #f0f0f0,
  padding: 10px,
  /* ...other styles... */

  &:hover {
    /* Styles for the card when hovered */
    background-color: #c0c0c0,
    /* ...other hover styles... */
  }
`;

interface CustomModalProps {
  title?: string;
  isOpen: boolean;
  onClose: () => void;
  modalStyle?: any;
}

const CustomModal: React.FC<CustomModalProps> = ({ ...props }) => {
  const ModalContent = () => {
    return (
      // <Grid item sx={{ m: 3 }}>
      <div>
        <Typography variant="h6" id="modal-title">
          {props.title ?? "Modal Title"}
        </Typography>
        <Typography
          variant="h6"
          id="modal-title"
          style={{ alignSelf: "flex-start", margin: "10px" }}
        >
          Modal Content
        </Typography>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            width: "100%",
          }}
        >
          <Button variant="contained" onClick={props.onClose}>
            Confirm
          </Button>
          <Button variant="contained" onClick={props.onClose}>
            Cancel
          </Button>
        </div>
      </div>
      // </Grid>
    );
  };

  return (
    <Modal open={props.isOpen} onClose={props.onClose}>
      {props.modalStyle ? <props.modalStyle props={props} /> : <ModalContent />}
    </Modal>
  );
};

export default CustomModal;