"use client";
import React, { useCallback, useMemo, useState } from "react";
import Button from "@mui/material/Button";
import { Card, Modal, Stack, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import { Add } from "@mui/icons-material";
import Check from "@mui/icons-material/Check";
import Close from "@mui/icons-material/Close";
import { TSMS_BUTTON_THEME } from "@/theme/colorConst";
import { ThemeProvider } from "@emotion/react";

interface Props {
  isOpen: boolean;
  onConfirm: (data: any) => void;
  onCancel: (data: any | null) => void;
}

const ConfirmModal: React.FC<Props> = ({ ...props }) => {
  const { t } = useTranslation();
  return (
    <>
      <Modal open={props.isOpen} onClose={props.onCancel}>
        <Card
          style={{
            flex: 10,
            marginBottom: "20px",
            width: "auto",
            minWidth: "400px",
            minHeight: "200px",
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
          }}
        >
          <>
            <Typography
              variant="h5"
              id="modal-title"
              sx={{
                flex: 1,
                ml: 4,
                mt: 2,
              }}
            >
              {t("Confirm")}
            </Typography>
            <>
              <Typography
                variant="h6"
                id="modal-title"
                sx={{
                  flex: 1,
                  mt: 4,
                  justifyContent: "center",
                  textAlign: "center",
                }}
              >
                {t("Are You Sure")}
              </Typography>
            </>
            {/* <ThemeProvider theme={TSMS_BUTTON_THEME}> */}
              <Stack direction="row">
                <Button
                  variant="contained"
                  endIcon={<Check />}
                  sx={{
                    flex: 1,
                    ml: 5,
                    mr: 2,
                    mt: 4,
                    justifyContent: "space-between",
                  }}
                  onClick={props.onConfirm}
                  // LinkComponent={Link}
                  // href="/settings/department/new"
                >
                  Proceed
                </Button>
                <Button
                  variant="contained"
                  startIcon={<Close />}
                  sx={{
                    flex: 1,
                    mr: 5,
                    mt: 4,
                    justifyContent: "space-between",
                  }}
                  color="warning"
                  onClick={props.onCancel}
                  // LinkComponent={Link}
                  // href="/settings/department/new"
                >
                  Cancel
                </Button>
              </Stack>
            {/* </ThemeProvider> */}
          </>
        </Card>
      </Modal>
    </>
  );
};

export default ConfirmModal;