// /frontend/src/utils/i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
const resources = {
	en: {
		translation: {
			"Welcome to React": "Welcome to React and react-i18next",
		},
	},
	fr: {
		translation: {
			"Welcome to React": "Bienvenue à React et react-i18next",
		},
	},
};

i18n
	.use(initReactI18next) // passes i18n down to react-i18next
	.init({
		resources,
		lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
		// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
		// if you're using a language detector, do not define the lng option

		interpolation: {
			escapeValue: false, // react already safes from xss
		},
	});

export default i18n;

import '@/utils/i18n'

createRoot(document.getElementById('root')!).render(
...
)

import enLang from "./locales/en/en.json";
import chLang from "./locales/ch/ch.json";

...
const resources = {
	en: {
		translation: enLang,
	},
	ch: {
		translation: chLang,
	},
};

i18n
	.use(initReactI18next) // passes i18n down to react-i18next
	.init({
		resources,
        fallbackLng: "ch", // 如果找不到對應的語言，就使用這個語言
		lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
		// you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
		// if you're using a language detector, do not define the lng option

		interpolation: {
			escapeValue: false, // react already safes from xss
		},
	});

export default i18n;

import { useTranslation } from "react-i18next";
import LanguageSwitcher from "@/components/language-switcher";

const DesktopNavbar: React.FC = () => {
	const { t } = useTranslation();
	return (
		<nav className='hidden md:flex mx-8'>
			<NavigationMenu>
				{/* 測試 i18n 用 */}
				<div>{t("welcomeMessage")}</div>
				...
			</NavigationMenu>

			{/* 右側語言切換器 */}
			<div className='flex items-center'>
				<LanguageSwitcher />
			</div>
		</nav>
	);
};