import RoomStatus from "./RoomStatus.wrn"
import { Card } from "@wrnexus/ui"

component RealtimeRoom {
  props {
    room: string = ""
    user: string = ""
    title: string = "Conversation"
    description: string = ""
    statusLabel: string = "Connecting…"
    emptyLabel: string = "No messages yet."
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }

  view {
    <Card
      {...attrs}
      title='{title}'
      description='{description}'
      color='{color}'
      size='{size}'
      class='{class}'
    >
      <section data-room='{room}' data-room-user='{user}' class="flex min-h-72 flex-col gap-4">
        <RoomStatus label='{statusLabel}' color='{color}' size='{size}' />
        <div data-room-log role="log" aria-live="polite" class="flex min-h-40 flex-1 flex-col gap-3 overflow-y-auto rounded-[var(--wrn-radius-sm)] bg-[var(--wrn-color-surface-2)] p-3">
          <p data-room-empty class="m-auto text-sm text-[var(--wrn-color-muted)]">{emptyLabel}</p>
          <slot></slot>
        </div>
        <slot name="composer"></slot>
      </section>
    </Card>
  }
}