component Badge {
  props {
    class = ""
    label = ""
    variant = "neutral"
    size = "md"
  }

  view {
    <span class="wire-badge wire-badge--{variant} wire-badge--{size} {class}">
      {#if variant === "success"}
        <span class="size-1.5 rounded-full bg-[var(--wire-color-success)]" aria-hidden="true"></span>
      {/if}
      {#if variant === "warning"}
        <span class="size-1.5 rounded-full bg-[var(--wire-color-warning)]" aria-hidden="true"></span>
      {/if}
      {#if variant === "danger"}
        <span class="size-1.5 rounded-full bg-[var(--wire-color-danger)]" aria-hidden="true"></span>
      {/if}
      {#if variant === "brand"}
        <span class="size-1.5 rounded-full bg-[var(--wire-color-primary)]" aria-hidden="true"></span>
      {/if}
      <span>{label}</span>
      <slot />
    </span>
  }
}