arbret/frontend/app/components/IntlProvider.tsx

"use client";

import { NextIntlClientProvider } from "next-intl";
import { ReactNode, useMemo } from "react";
import { useLanguage } from "../hooks/useLanguage";

// Import all locale messages
import esCommon from "../../locales/es/common.json";
import enCommon from "../../locales/en/common.json";
import caCommon from "../../locales/ca/common.json";
import esNavigation from "../../locales/es/navigation.json";
import enNavigation from "../../locales/en/navigation.json";
import caNavigation from "../../locales/ca/navigation.json";
import esExchange from "../../locales/es/exchange.json";
import enExchange from "../../locales/en/exchange.json";
import caExchange from "../../locales/ca/exchange.json";

const messages = {
  es: { common: esCommon, navigation: esNavigation, exchange: esExchange },
  en: { common: enCommon, navigation: enNavigation, exchange: enExchange },
  ca: { common: caCommon, navigation: caNavigation, exchange: caExchange },
};

interface IntlProviderProps {
  children: ReactNode;
}

export function IntlProvider({ children }: IntlProviderProps) {
  const { locale } = useLanguage();

  const localeMessages = useMemo(() => {
    return messages[locale] || messages.es;
  }, [locale]);

  return (
    <NextIntlClientProvider locale={locale} messages={localeMessages}>
      {children}
    </NextIntlClientProvider>
  );
}