import { ChatBubble } from "@wrnexus/ui"

component RealtimeMessageBubble {
  props {
    id: string = ""
    text: string = ""
    author: string = ""
    avatarSrc: string = ""
    avatarFallback: string = ""
    timestamp: string = ""
    status: string = ""
    direction: string = "incoming"
    color: string = "primary"
    size: string = "default"
    class: string = ""
  }

  view {
    <ChatBubble
      {...attrs}
      items='{[{ id: id, text: text, author: author, avatarSrc: avatarSrc, avatarFallback: avatarFallback, timestamp: timestamp, status: status, direction: direction }]}'
      showAvatars='{avatarSrc != "" || avatarFallback != ""}'
      showMetadata='{timestamp != "" || status != ""}'
      color='{color}'
      size='{size}'
      class='{class}'
    />
  }
}