import { ComponentProps, FC } from 'react'
import { FormattedMessage, IntlShape } from 'react-intl'
import { useMessages } from '../../../src/i18n'
import { FormatXMLElementFn, PrimitiveType } from 'intl-messageformat'

interface Props extends ComponentProps<typeof FormattedMessage> {
  id: keyof ReturnType<typeof useMessages>['en']
}

export const I18n: FC<Props> = ({ children, ...props }) => {
  return <FormattedMessage {...props}>{children}</FormattedMessage>
}

export const i18n = (
  intl: IntlShape,
  id: keyof ReturnType<typeof useMessages>['en'],
  values?: Record<string, PrimitiveType | FormatXMLElementFn<string, string>>
) => {
  return intl.formatMessage({ id }, values, { ignoreTag: true })
}