import { MessageCard } from 'domains/store/store.types'
import { useTranslatedEventData } from 'domains/translations/hooks'
import MessageContainer from 'ui/components/conversation/message-container'
import { useGeneratedId } from 'ui/hooks/seamly-hooks'
import CardComponent from './card-component'

const CardMessage = ({ event }: { event: MessageCard }) => {
  const { body } = useTranslatedEventData(event)
  const descriptionId = useGeneratedId()

  return (
    <MessageContainer type="card" event={event}>
      <CardComponent id={descriptionId} {...body} />
    </MessageContainer>
  )
}

export default CardMessage