import { createElement, useCallback } from 'react'
import { useTranslation } from 'react-i18next'

import LocalisedText from '@/components/LocalisedText'
import { translateUIMessage } from '@/lib/i18n'
import { useLocale } from '@/lib/useLocale'


export const useUITranslation = (namespace = 'common') => {
  const locale = useLocale ()
  const { i18n } = useTranslation (namespace, { lng: locale })

  const message = useCallback ((key: string, values?: Record<string, string | number>) => {
    return translateUIMessage (key, namespace, locale, values, i18n)
  }, [namespace, locale, i18n])

  const label = useCallback ((key: string, values?: Record<string, string | number>) => {
    const result = message (key, values)
    return createElement (LocalisedText, {
	language: result.language, children: result.text })
  }, [message])

  const siteTitle = message ('shared:labels.brand')
  return { message, label, siteTitle }
}