import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // List your supported languages & default
    supportedLngs: ["en", "de"],
    fallbackLng: "en",

    // Tell i18next to load from your API
    backend: {
      // If your API is on another origin, use the absolute URL
      // Example: loadPath: (lngs, ns) => `https://api.example.com/i18n?namespace=${ns[0]}&lang=${lngs[0]}`
      loadPath: (lngs: string[], namespaces: string[]) =>
        `https://sdt.taocs.de/api/v1/translations?namespace=${encodeURIComponent(namespaces[0])}&lang=${encodeURIComponent(lngs[0])}`,

      // If your API returns a custom shape, you can transform it:
      // parse: (data: string) => JSON.parse(data).translations,
      // requestOptions: { credentials: "include" } // if you need cookies
    },

    // i18next will request one namespace at a time by default.
    // If you prefer to request multiple at once, you can implement it on the server side.
    ns: ["page:home"],          // default namespace(s)
    defaultNS: "page:home",

    interpolation: { escapeValue: false },

    // Good DX for React
    react: {
      useSuspense: true,
    },
  });

export default i18n;
