import { useI18n } from 'domains/i18n/hooks'
import { useTranslatedEventData } from 'domains/translations/hooks'
import MessageContainer from 'ui/components/conversation/message-container'

const Translation = ({ event, ...props }) => {
  const { t } = useI18n()
  const { body } = useTranslatedEventData(event)
  return (
    <MessageContainer type="text" event={event} {...props}>
      {t(body.key.join('.'), body.variables)}
    </MessageContainer>
  )
}

export default Translation