import { useMemo } from 'react';
import { Outlet } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
import i18n from '../i18n.js';
import { Header } from './Header.jsx';
import { Footer } from './Footer.jsx';
import { useTheme } from '../hooks/useTheme.js';
import '../styles/layout.css';

export function LangLayout({ lang }) {
  const { theme, toggleTheme } = useTheme();
  // A per-page cloned instance, not a mutation of the shared `i18n` singleton:
  // the SSG build renders many pages concurrently in the same process
  // (ssgOptions.concurrency), so changing the shared instance's language
  // during render would leak between pages rendering at the same time.
  const scopedI18n = useMemo(() => i18n.cloneInstance({ lng: lang }), [lang]);

  return (
    <I18nextProvider i18n={scopedI18n}>
      <Header lang={lang} theme={theme} onToggleTheme={toggleTheme} />
      <main>
        <Outlet />
      </main>
      <Footer />
    </I18nextProvider>
  );
}