import { reactive, ref, toRefs, watchEffect } from 'vue'
import { useI18n, UseI18nOptions } from 'vue-i18n'

export function useStoreI18n(options?: UseI18nOptions) {
  const { t, locale } = useI18n(options)
  const keyMap = reactive<Record<string, string>>({})
  function $t(key: string) {
    watchEffect(() => {
      if (locale.value) keyMap[key] = t(key)
    })
    return toRefs(keyMap)[key]
  }
  return {
    $t,
  }
}