import { Badge } from "@wrnexus/ui"

component RoomStatus {
  props {
    label: string = "Connecting…"
    connectedLabel: string = "Connected"
    disconnectedLabel: string = "Disconnected"
    errorLabel: string = "Connection error"
    color: string = "primary"
    size: string = "sm"
    class: string = ""
  }

  view {
    <div class='flex items-center justify-between gap-3 {class}'>
      <Badge label="Live" color='{color}' size='{size}' variant="soft" />
      <span
        data-room-status
        data-room-status-class="inline-flex items-center gap-2 text-xs font-medium text-[var(--wrn-color-muted)]"
        class="inline-flex items-center gap-2 text-xs font-medium text-[var(--wrn-color-muted)]"
        aria-live="polite"
      >{label}</span>
    </div>
  }
}