"use client"

import { IntlProvider } from "react-intl"

import { logger } from "@scandic-hotels/common/logger"

import type { ClientIntlProviderProps } from "@/types/i18n"

const logged: Record<string, boolean> = {}

export default function ClientIntlProvider({
  children,
  locale,
  defaultLocale,
  messages,
}: ClientIntlProviderProps) {
  return (
    <IntlProvider
      locale={locale}
      defaultLocale={defaultLocale}
      messages={messages}
      onError={(err) => {
        let msg = err.message

        if (err.code === "MISSING_TRANSLATION") {
          const id = err.descriptor?.id
          if (id) {
            msg = id
          }
        }

        if (!logged[msg]) {
          logged[msg] = true
          logger.warn("IntlProvider", err)
        }
      }}
    >
      {children}
    </IntlProvider>
  )
}