"use client"

import { type IntlConfig, IntlProvider } from "react-intl"

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

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

type ClientIntlProviderProps = React.PropsWithChildren<
  Pick<IntlConfig, "defaultLocale" | "messages"> & { locale: Lang }
>

export default function ClientIntlProvider({
  children,
  locale,
  defaultLocale,
  messages,
}: ClientIntlProviderProps) {
  if (!Lang[locale]) {
    locale = Lang.en
  }

  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>
  )
}