import { ParticipantEvent } from 'domains/store/store.types'
import { useTranslatedParticipantData } from 'domains/translations/hooks'
import { FunctionalComponent } from 'preact'
import EventDivider from 'ui/components/conversation/event-divider'

type ParticipantProps = {
  event: ParticipantEvent
}

const Participant: FunctionalComponent<ParticipantProps> = ({ event }) => {
  const { participant } = event.payload
  const { body: introduction } = useTranslatedParticipantData(event)

  if (!introduction) {
    return null
  }

  return (
    <EventDivider
      graphicSrc={participant?.avatar}
      graphicType={participant?.avatar ? 'avatar' : undefined}
      iconName={!participant?.avatar ? 'balloon' : undefined}
      dividerType="participant"
      title={introduction}
    />
  )
}

export default Participant