import { Alert } from "@wrnexus/ui"

component TypingIndicator {
  props {
    names: unknown[] = []
    label: string = "Typing…"
    color: string = "primary"
    size: string = "sm"
    class: string = ""
  }

  view {
    {#if names.length > 0}
      <Alert
        title='{names.length == 1 ? names[0] + " is typing" : names.length + " people are typing"}'
        description='{label}'
        icon="icon-[lucide--message-circle-more]"
        color='{color}'
        size='{size}'
        variant="soft"
        class='{class}'
      />
    {/if}
  }
}