import { StrictMode, type ReactNode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { StoreProvider, useStore } from './lib/store';
import { I18nProvider } from './lib/i18n';
import './styles/base.css';
import './styles/features.css';
import './styles/ui2.css';
import './styles/ui3.css';
import './styles/plans.css';
import './styles/fonts.css';

/** Connects the saved profile language to the translation context. */
function Bridge({ children }: { children: ReactNode }) {
  const { state, setProfile } = useStore();
  return <I18nProvider lang={state.profile.lang} onLang={(lang) => setProfile({ lang })}>{children}</I18nProvider>;
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <StoreProvider>
      <Bridge>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Bridge>
    </StoreProvider>
  </StrictMode>,
);