import React from 'react';
import ReactDOM from 'react-dom/client';
import EyecatchCheck from './apps/pages/EyecatchCheck';
import Settings from './apps/pages/Settings';
import PostEdit from './apps/views/PostEdit';
import '../scss/main.css';

// コンポーネント名と実際のコンポーネントをマッピングするオブジェクト
const componentMap = {
    EyecatchCheck,
    Settings,
    PostEdit,
};

// DOMが読み込まれた後に実行
window.addEventListener('DOMContentLoaded', () => {
    // ページ上のすべてのReactの「器」を取得
    const rootElements = document.querySelectorAll('.pixalia-react-root');

    // それぞれの「器」に対して処理を行う
    rootElements.forEach((element) => {
        const componentName = element.dataset.component; // data-component属性の値を取得
        const ComponentToRender = componentMap[componentName]; // マップから対応するコンポーネントを探す

        if (ComponentToRender) {
            const root = ReactDOM.createRoot(element);
            root.render(
                <React.StrictMode>
                    <ComponentToRender />
                </React.StrictMode>
            );
        }
    });
});