import { Button, Modal } from 'antd';
import { ReactNode, useState } from 'react';

export function MyCommonModal(props: {
  title: string;
  width: number;
  button_text: string;
  children: ReactNode;
}) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button onClick={showModal} size="small">
        {props.button_text}
      </Button>
      <Modal
        title={props.title}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={props.width || 800}
        destroyOnClose
      >
        {props.children}
      </Modal>
    </>
  );
}
