import * as React from 'react'
import { useEffect } from 'react'

export function Modal ({ children, showOnStartup }:{children : React.ReactNode, showOnStartup?: boolean}) {
  useEffect(() => {
    if (showOnStartup) { window.my_modal_3.showModal() }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
        <>

            {/* You can open the modal using ID.showModal() method */}
            <dialog id="my_modal_3" className="tw-modal tw-transition-all tw-duration-300">
                <form method="dialog" className="tw-modal-box tw-transition-none">
                    <button className="tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2 focus:tw-outline-none">✕</button>
                    {children}
                </form>
                <form method="dialog" className="tw-modal-backdrop">
                    <button>close</button>
                </form>
            </dialog>
        </>
  )
}