import type { ReactNode } from 'react';
import type { TranslationMap } from 'i18n';
import { I18nProvider } from 'i18n';
import { useSettings } from 'state/useSettings';
import en from '../locales/en.json';
import pt from '../locales/pt.json';

const translations: TranslationMap = { en, pt };

type I18nBridgeProps = {
  children: ReactNode;
};

export const I18nBridge = ({ children }: I18nBridgeProps) => {
  const { settings } = useSettings();
  const locale = settings.languages.default;

  return (
    <I18nProvider translations={translations} locale={locale}>
      {children}
    </I18nProvider>
  );
};