import { ChannelEvent } from 'domains/store/store.types'
import { className } from 'lib/css'
import useEventComponentMapping from 'ui/hooks/use-event-component-mapping'

function CollapsedChatMessage({ event }: { event: ChannelEvent }) {
  const [Component] = useEventComponentMapping(event)

  return (
    <li>
      <Component event={event} />
    </li>
  )
}

export function CollapsedChatMessages({ events }: { events: ChannelEvent[] }) {
  return (
    <ul className={className('collapsed-chat-messages')}>
      {events.map((event) => (
        <CollapsedChatMessage key={event.payload.id} event={event} />
      ))}
    </ul>
  )
}