import React from 'react'
import Modal from 'react-modal'
import ModalEnvatoIcon from './ModalEnvatoIcon'
import styles from './MagicModalWrapper.module.scss'
const customStyles = {
  overlay: {
    backgroundColor: 'rgba(32, 32, 32, 0.81)',
    zIndex: 199999,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  content: {
    background: '#f1f1f1',
    border: '0',
    padding: '0',
    right: 'auto',
    bottom: 'auto',
    top: 'auto',
    left: 'auto',
    borderRadius: '4px'
  }
}

const MagicModalWrapper = ({ photoId, photoTitle, onCloseCallback = null, children }) => {
  const [modalIsOpen, setModalIsOpen] = React.useState(true)
  const closeModal = () => {
    setModalIsOpen(false)
    if (onCloseCallback) {
      onCloseCallback()
    }
  }

  // Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
  // We get window.templateKitImport.modalAppHolder from our initial render in main.jsx:
  if (typeof window !== 'undefined' && window.templateKitImport && window.templateKitImport.modalAppHolder) {
    Modal.setAppElement(window.templateKitImport.modalAppHolder)
  }

  return (
    <Modal
      isOpen={modalIsOpen}
      onRequestClose={closeModal}
      style={customStyles}
      contentLabel='Envato Elements'
      data-testid='modal-wrapper'
    >
      <div className={styles.modalInner}>
        <div className={styles.modalHeader}>
          <div className={styles.modalLogo}>
            <ModalEnvatoIcon />
          </div>
          <div className={styles.headerNav} />
          <div className={styles.headerActions}>
            <button onClick={closeModal} data-testid='modal-close-button' className={styles.closeButton}>
              <span className={`dashicons dashicons-no-alt ${styles.dismissIcon}`} />
            </button>
          </div>
        </div>
        <div className={styles.magicModalInner}>
          {typeof children === 'function' ? children({ closeModal }) : children}
        </div>
      </div>
    </Modal>
  )
}

export default MagicModalWrapper
<?xml version="1.0" encoding="UTF-8"?>
<!-- This sitemap was dynamically generated on April 3, 2026 at 7:20 pm by All in One SEO - the original SEO plugin for WordPress. -->

<?xml-stylesheet type="text/xsl" href="https://digigrowths.com/default.xsl?sitemap=root"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap.xml]]></loc>
		<lastmod><![CDATA[2026-03-29T00:17:10+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap2.xml]]></loc>
		<lastmod><![CDATA[2026-03-13T12:40:21+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap3.xml]]></loc>
		<lastmod><![CDATA[2026-02-10T12:32:24+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap4.xml]]></loc>
		<lastmod><![CDATA[2025-12-22T08:27:13+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap5.xml]]></loc>
		<lastmod><![CDATA[2025-10-30T14:51:33+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap6.xml]]></loc>
		<lastmod><![CDATA[2025-10-11T23:22:41+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap7.xml]]></loc>
		<lastmod><![CDATA[2025-09-19T21:08:59+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post-sitemap8.xml]]></loc>
		<lastmod><![CDATA[2025-07-30T05:33:46+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/page-sitemap.xml]]></loc>
		<lastmod><![CDATA[2026-03-27T00:05:29+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/product-sitemap.xml]]></loc>
		<lastmod><![CDATA[2022-09-20T17:47:14+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/category-sitemap.xml]]></loc>
		<lastmod><![CDATA[2026-03-29T00:17:10+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/post_tag-sitemap.xml]]></loc>
		<lastmod><![CDATA[2026-03-14T07:42:32+00:00]]></lastmod>
	</sitemap>
	<sitemap>
		<loc><![CDATA[https://digigrowths.com/product_cat-sitemap.xml]]></loc>
		<lastmod><![CDATA[2022-09-20T17:47:14+00:00]]></lastmod>
	</sitemap>
</sitemapindex>