import { Modal } from "flowbite";
import "./stylesheets/shared.css";

function createModal() {
  const target = document.getElementById('info-modal');
  const button = document.getElementById('modal-button');
  const options = {
    placement: 'center-center',
    backdrop: 'dynamic',
    backdropClasses: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
    closable: true
  };

  const new_modal = new Modal(target, options);
  button?.addEventListener('click', () => new_modal.hide());

  return new_modal;
}

export function InfoModal({ text }) {

  return (
    <div id="info-modal" tabIndex="-1" aria-hidden="true" className="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
      <div className="relative bg-white w-full max-w-2xl max-h-full">
        <div className="p-6 space-y-6">
          <p className="text-base leading-relaxed text-gray-900 dark:text-gray-400">
            {text}
          </p>
        </div>

        <div className="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
          <button id='modal-button' type="button" className=" button text-white hover:bg-blue-800 focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800">Ok</button>
        </div>
      </div>
    </div>
  );
}