import { Si18nCore } from "si18n.js/core";

const loc = new Si18nCore();
await loc.init({
  locales: {
    en: { greeting: "Hello" },
    fr: { greeting: "Bonjour" }
  },
  lang: "fr",
  fallbackLang: "en"
});

console.log(loc.t("greeting")); // "Bonjour"

// CommonJS
const { Si18nNode, createMemoryStorage } = require("si18n.js/node");

// or ESM : import { Si18nNode } from "si18n.js/node";

const loc = new Si18nNode({
  path: "./locales",
  availableLocales: ["en", "fr"],
  fallbackLang: "en"
});

console.log(loc.t("greeting"));

"use client";

import Si18nBrowser from "si18n.js/browser";
import { Si18nProvider, useTranslation } from "si18n.js/react";

const i18n = new Si18nBrowser();

function LanguagePicker() {
  const { t, locale, locales, setLocale, isReady, error } = useTranslation();

  if (error) return <p>Erreur : {error.message}</p>;
  if (!isReady) return <p>Chargement des traductions...</p>;

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <select value={locale} onChange={(e) => void setLocale(e.target.value)}>
        {locales.map((lang) => (
          <option key={lang} value={lang}>{lang.toUpperCase()}</option>
        ))}
      </select>
    </div>
  );
}

export default function App() {
  return (
    <Si18nProvider
      i18n={i18n}
      options={{
        path: "./locales",
        availableLocales: ["fr", "en"],
        fallbackLang: "fr"
      }}
    >
      <LanguagePicker />
    </Si18nProvider>
  );
}

// app/page.tsx (Server Component without DOM)
import { createServerTranslator } from "si18n.js/react/server";

export default async function Page() {
  const { t, locale } = await createServerTranslator({
    path: "./locales",
    availableLocales: ["fr", "en"],
    lang: "fr",
    fallbackLang: "fr"
  });

  return (
    <main>
      <h1>{t("welcome")}</h1>
      <p>Locale active sur le serveur : {locale}</p>
    </main>
  );
}

const { Si18nNode } = require("si18n.js/node");

const loc = new Si18nNode({
  path: "./locales",
  availableLocales: ["en", "fr"],
  fallbackLang: "en"
});

// Automatically detects system language (LC_ALL, LANG, etc.)
console.log(loc.getLocale());
console.log(loc.t("greeting"));

const { Si18nNode, createMemoryStorage, createProcessEnvStorage } = require("si18n.js/node");

// 1. In-memory volatile storage (default, does not pollute process.env)
const locMemory = new Si18nNode(
  { locales: { en: { hi: "Hi" } }, lang: "en" },
  { storage: createMemoryStorage() }
);

// 2. Persistence in process.env (e.g. process.env.APP_LANG)
const locEnv = new Si18nNode(
  { locales: { en: { hi: "Hi" } }, lang: "en", saveAs: "APP_LANG" },
  { storage: createProcessEnvStorage() }
);

import { Si18nProvider, useTranslation } from "si18n.js/react";
import Si18nBrowser from "si18n.js/browser";

const i18n = new Si18nBrowser();

function UserBadge() {
  const { t, locale, locales, setLocale } = useTranslation();
  return (
    <header>
      <span>{t("greeting", { name: "Alex" })}</span>
      {locales.map((code) => (
        <button
          key={code}
          disabled={code === locale}
          onClick={() => void setLocale(code)}
        >
          {code}
        </button>
      ))}
    </header>
  );
}

// app/[lang]/page.tsx
import { createServerTranslator } from "si18n.js/react/server";

export default async function Page({ params }: { params: Promise<{ lang: string }> }) {
  const { lang } = await params;
  const { t, locale } = await createServerTranslator({
    path: "./locales",
    availableLocales: ["fr", "en"],
    lang,
    fallbackLang: "fr"
  });

  return (
    <section>
      <h1>{t("home.title")}</h1>
      <p>Langue rendue côté serveur : {locale}</p>
    </section>
  );
}

import { Si18nCore, type StorageAdapter } from "si18n.js/core";

// Custom storage adapter (e.g. AsyncStorage, Redis, cookies...)
const customStorage: StorageAdapter = {
  getItem: (key) => window.sessionStorage.getItem(key),
  setItem: (key, val) => { window.sessionStorage.setItem(key, val); }
};

const loc = new Si18nCore(undefined, {
  storage: customStorage,
  detectLanguage: () => navigator.languages?.[0] ?? null
});

await loc.init({
  locales: { en: { ok: "OK" }, fr: { ok: "D'accord" } },
  lang: "fr"
});