import { StrictMode, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';
import './preview.css';
import App from '../App.jsx';
import { ContentProvider } from '../context/ContentContext.jsx';
import { PreviewContext } from '../context/PreviewContext.jsx';

function PreviewShell() {
  useEffect(() => {
    document.body.classList.add('admin-preview-embed');
    return () => document.body.classList.remove('admin-preview-embed');
  }, []);

  return <App previewMode />;
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <PreviewContext.Provider value>
      <ContentProvider previewMode>
        <PreviewShell />
      </ContentProvider>
    </PreviewContext.Provider>
  </StrictMode>,
);
