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

const DEFAULT_ROOT_ID = 'calfhouse-app-root';

// Function to mount the app into a specific DOM element
const init = (elementId: string = DEFAULT_ROOT_ID) => {
  const rootElement = document.getElementById(elementId);
  
  if (!rootElement) {
    console.warn(`CalfHouse App: Element with id "${elementId}" not found. App not mounted.`);
    return;
  }

  // Prevent double mounting
  if (rootElement.hasAttribute('data-mounted')) {
      return;
  }

  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  
  rootElement.setAttribute('data-mounted', 'true');
};

// Expose the init function globally so it can be called from standard HTML/JS
// Usage on website: window.CalfHouseApp.init('my-container-id');
// @ts-ignore
window.CalfHouseApp = {
    init: init
};

// Auto-mount if the default container exists (useful for development or simple inclusion)
if (document.getElementById(DEFAULT_ROOT_ID)) {
    init(DEFAULT_ROOT_ID);
}