// src/App.js
import * as React from 'react';
import { render } from 'react-dom';
import { I18nProvider } from 'react-lingua';
import { Main } from './Main';

const translations = {
  'en-US': {
    helloWorld: 'Hello World!',
    welcome: 'Nice to meet you, {name}!',
    info: 'Example paragraph {someComp}.',
    infoPart: 'with JSX inside',
  },
  'pl-PL': {
    helloWorld: 'Witaj Świecie!',
    welcome: 'Miło Cię poznać, {name}!',
    info: 'Przykładowo paragraf {someComp}.',
    infoPart: 'z JSXem w środku',
  },
};

const App = () => (
  <I18nProvider
    initialLocale="en-US"
    translations={translations}
    onChange={(prevLocale, newLocale) => console.log(`Changed from ${prevLocale} to ${newLocale}`)}
  >
    <Main />
  </I18nProvider>
);

render(<App />, document.getElementById('app'));

// src/Main.js
import * as React from 'react';
import { Translation, useTranslation } from 'react-lingua';

export const Main = () => {
  const { t, locale, setLocale } = useTranslation();

  return (
    <main>
      <h1>{t('helloWorld')}</h1>
      <h2>{t('welcome', { name: 'Dominika' })}</h2>
      <p>
        <Translation
          id="info"
          values={{
            someComp: <strong>{t('infoPart')}</strong>
          }}
        />
      </p>
    </main>
  );
};