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

component PresenceList {
  props {
    members: unknown[] = []
    title: string = "People"
    emptyLabel: string = "No one is online."
    color: string = "primary"
    size: string = "md"
    class: string = ""
  }

  view {
    <Card title='{title}' color='{color}' size='{size}' empty='{members.length == 0}' emptyTitle='{emptyLabel}' class='{class}'>
      <div class="space-y-3">
        {#each members as member}
          <div class="flex items-center gap-3">
            <Avatar src='{member.avatar || ""}' fallback='{member.name || member.userId || "?"}' size="sm" color='{color}' />
            <div class="min-w-0 flex-1">
              <p class="m-0 truncate text-sm font-semibold">{member.name || member.userId}</p>
              <p class="m-0 text-xs text-[var(--wrn-color-muted)]">{member.status || "online"}</p>
            </div>
            <Badge label='{member.status || "online"}' color='{member.status == "busy" ? "danger" : member.status == "away" ? "warning" : "success"}' size="sm" variant="soft" />
          </div>
        {/each}
      </div>
    </Card>
  }
}