component ProductStatusBadge {
  props {
    label = "Available"
    status = ""
    class = ""
  }

  view {
    <span
      class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] text-[var(--wire-color-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
    >
      <span class="h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true"></span>
      {label}
    </span>
  }
}