import { Badge, Card } from "@wrnexus/ui"

component RoomMeta {
  props {
    name: string = "Room"
    description: string = ""
    memberCount: number = 0
    onlineCount: number = 0
    private: boolean = false
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }

  view {
    <Card title='{name}' description='{description}' color='{color}' size='{size}' class='{class}'>
      <div class="flex flex-wrap items-center gap-2">
        <Badge label='{onlineCount + " online"}' color="success" variant="soft" size="sm" />
        <Badge label='{memberCount + " members"}' color='{color}' variant="soft" size="sm" />
        {#if private}<Badge label="Private" icon="icon-[lucide--lock]" color="warning" variant="soft" size="sm" />{/if}
      </div>
      <slot></slot>
    </Card>
  }
}