import React, { useMemo } from 'react'

import { SegmentEvent } from '~/src/types/event'

import { EventDisplayText } from './style'


export type EventLabelProps = {
  event: SegmentEvent
}

export const EventLabel = ({ event }: EventLabelProps) => {
  const displayLabel = useMemo(() => {
    switch (event.type) {
      case 'identify':
        return event.userId
      case 'track':
        return event.event
      case 'page':
        return event.properties.title || event.properties.path
      default:
        return null
    }
  }, [event])

  return <EventDisplayText>{displayLabel}</EventDisplayText>
}