import { useEffect, useState } from 'react';
import Button from '../StandardButton';

export default function Modal({
  title,
  content,
  width,
  button,
  open,
  onClose,
}: {
  title: string;
  content: any;
  width: number;
  button: string;
  open: boolean;
  onClose: () => void;
}) {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    if (open) {
      setIsOpen(true);
    } else {
      setIsOpen(false);
    }
  }, [open]);

  return (
    <div>
      {isOpen && (
        <>
          {/* Modal Overlay */}
          <div
            className={`botfoundry-modal-overlay${isOpen ? ' open' : ''}`}
            onClick={onClose}
          ></div>

          {/* Modal Content */}
          <div className="botfoundry-modal" style={{ maxWidth: width }}>
            <span className="botfoundry-modal-close" onClick={onClose}>
              &times;
            </span>
            <div className="botfoundry-modal-header">{title}</div>
            <div className="botfoundry-modal-content">{content}</div>
            {button ? <Button title={button} onClick={onClose} /> : null}
          </div>
        </>
      )}
    </div>
  );
}