import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';

// Find all audit root elements on the page and mount the React app.
// In WP, each shortcode renders a unique root div.
function mount() {
  const roots = document.querySelectorAll<HTMLElement>('.noon-audit-wrapper');

  if (roots.length === 0) {
    console.warn('[Noon Audit] No .noon-audit-wrapper elements found.');
    return;
  }

  roots.forEach((el) => {
    const root = ReactDOM.createRoot(el);
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  });
}

// Run on DOM ready.
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mount);
} else {
  mount();
}