Badge

import type { ComponentProps } from "react";

function cx(...classes: (string | false | null | undefined)[]) {
  return classes.filter(Boolean).join(" ");
}

// Text uses the -700 step in light mode so 12px labels pass WCAG AA on the soft tint.
const tones = {
  neutral: "border-zinc-950/10 text-zinc-700 dark:border-white/15 dark:text-zinc-300",
  info: "border-sky-500/35 bg-sky-500/[0.08] text-sky-700 dark:text-sky-400",
  success: "border-emerald-500/30 bg-emerald-500/[0.08] text-emerald-700 dark:text-emerald-400",
  warning: "border-amber-500/35 bg-amber-500/[0.08] text-amber-700 dark:text-amber-400",
  danger: "border-red-500/35 bg-red-500/[0.08] text-red-700 dark:text-red-400",
} as const;

const dots = {
  neutral: "bg-zinc-400 dark:bg-zinc-500",
  info: "bg-sky-500",
  success: "bg-emerald-500",
  warning: "bg-amber-500",
  danger: "bg-red-500",
} as const;

// A still halo around the dot: reads as "live" without looping motion.
const halos = {
  neutral: "ring-zinc-400/25 dark:ring-zinc-500/30",
  info: "ring-sky-500/25",
  success: "ring-emerald-500/25",
  warning: "ring-amber-500/25",
  danger: "ring-red-500/25",
} as const;

export type BadgeTone = keyof typeof tones;

export interface BadgeProps extends ComponentProps<"span"> {
  tone?: BadgeTone;
  /** Shows a status dot before the label. */
  dot?: boolean;
  /**
   * Marks ongoing activity with a soft halo around the dot. The halo is still (no looping
   * animation); it eases in and out when the prop changes. Needs `dot`.
   */
  pulse?: boolean;
}

export function Badge({ tone = "neutral", dot = false, pulse = false, className, children, ...props }: BadgeProps) {
  return (
    <span
      data-tone={tone}
      data-live={(dot && pulse) || undefined}
      className={cx(
        "inline-flex h-5.5 items-center gap-1.5 rounded-md border px-2 text-xs leading-none font-medium whitespace-nowrap",
        "transition-[background-color,border-color,color] duration-200 ease-out motion-reduce:transition-none",
        "[&_svg]:size-3 [&_svg]:shrink-0",
        tones[tone],
        className,
      )}
      {...props}
    >
      {dot ? (
        <span
          aria-hidden="true"
          className={cx(
            "size-1.5 shrink-0 rounded-full",
            "transition-[background-color,box-shadow] duration-200 ease-out motion-reduce:transition-none",
            dots[tone],
            pulse ? cx("ring-[3px]", halos[tone]) : "ring-0 ring-transparent",
          )}
        />
      ) : null}
      {children}
    </span>
  );
}