/**
 * @author Sameena Ammed
 * This component is used as the custom modal
 * antd Modal is imported here
 */
import React, { useState } from "react";
import { Modal as AntdModal, Button } from "antd";
import PropTypes from "prop-types";
// import 'antd/dist/antd.css';

export default function Modal({
  children,
  onOk = () => {},
  onCancel = () => {},
  destroyOnClose = false,
  width = "50%",
}) {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setVisible(false);
    onOk();
  };

  const handleCancel = () => {
    setVisible(false);
    onCancel();
  };

  return (
    <>
      <Button onClick={showModal}>Open Modal</Button>
      <AntdModal
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose={destroyOnClose}
        width={width}
      >
        {children}
      </AntdModal>
    </>
  );
}


Modal.propTypes = {
  /** A boolean value indicating whether the modal is visible or hidden. */
  visible: PropTypes.bool.isRequired,
  /** The content of the modal, typically a set of components. */
  children: PropTypes.node.isRequired,
  /** A function to be called when the user clicks the "Ok" button. If not provided, a default empty function is used. */
  onOk: PropTypes.func,
  /** A function to be called when the user clicks the "Cancel" button. If not provided, a default empty function is used. */
  onCancel: PropTypes.func,
  /** A boolean value indicating whether the modal should be destroyed when closed. If set to true, the modal will be removed from the DOM when closed. Default value is false. */
  destroyOnClose: PropTypes.bool,
  /** A string value representing the width of the modal. Default value is "50%". */
  width: PropTypes.string,
};
