import { useTranslatedEventData } from 'domains/translations/hooks'
import useEventLinkClickHandler from 'ui/components/conversation/event/hooks/use-event-link-click-handler'
import MessageContainer from 'ui/components/conversation/message-container'

const Splash = ({ event, ...props }) => {
  const { payload } = event
  const { body } = useTranslatedEventData(event)
  const eventClick = useEventLinkClickHandler({
    originMessage: payload.id,
    transactionId: payload.transactionId,
  })

  return (
    <MessageContainer
      type="splash"
      event={event}
      onClick={eventClick}
      {...props}
      bodyProps={{
        dangerouslySetInnerHTML: {
          __html: body?.text || '',
        },
      }}
    />
  )
}

export default Splash