Halo Badge

"use client";

import { type HTMLAttributes } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  HaloBadge                                                          */
/* ------------------------------------------------------------------ */

export type HaloBadgeVariant = "neutral" | "success" | "warning" | "error" | "info";

interface HaloBadgeProps extends HTMLAttributes<HTMLSpanElement> {
  /** Status color of the dot + halo — the pill itself stays ink [Optional, default: "neutral"] */
  variant?: HaloBadgeVariant;
  /** Animate the halo ripple [Optional, default: true] */
  pulse?: boolean;
  /** Show the status dot [Optional, default: true] */
  dot?: boolean;
}

/* Status lives in the dot and its halo only; the pill stays ink so a row of
   badges never turns into a rainbow. */
const VARIANTS: Record<HaloBadgeVariant, { dot: string; halo: string; ring: string }> = {
  neutral: { dot: "bg-zinc-400", halo: "bg-zinc-400", ring: "shadow-zinc-500/25" },
  success: { dot: "bg-emerald-400", halo: "bg-emerald-400", ring: "shadow-emerald-500/40" },
  warning: { dot: "bg-amber-400", halo: "bg-amber-400", ring: "shadow-amber-500/40" },
  error: { dot: "bg-red-400", halo: "bg-red-400", ring: "shadow-red-500/40" },
  info: { dot: "bg-sky-400", halo: "bg-sky-400", ring: "shadow-sky-500/40" },
};

/**
 * A status badge whose color lives entirely in a glowing dot: the pill is
 * always ink (dark solid), while the dot ripples an expanding halo and casts
 * a soft colored shadow around the badge. Variants only swap the dot + halo
 * hue, so a cluster of badges reads calm instead of rainbow.
 * @param {HaloBadgeVariant} variant - Dot + halo color [Optional, default: "neutral"]
 * @param {boolean} pulse - Ripple the halo [Optional, default: true]
 */
export function HaloBadge({
  variant = "neutral",
  pulse = true,
  dot = true,
  children,
  className,
  ...props
}: HaloBadgeProps) {
  const styles = VARIANTS[variant];
  return (
    <span className="relative inline-flex">
      <span
        className={cn(
          "relative inline-flex items-center gap-2 rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-zinc-100 shadow-[0_0_24px_-2px] dark:bg-zinc-100 dark:text-zinc-900",
          styles.ring,
          className,
        )}
        {...props}
      >
        {dot && (
          <span className="relative flex size-2 shrink-0">
            {pulse && (
              <motion.span
                className={cn("absolute inline-flex h-full w-full rounded-full opacity-75", styles.halo)}
                animate={{ scale: [1, 2.6, 1], opacity: [0.75, 0, 0.75] }}
                transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
              />
            )}
            <span className={cn("relative inline-flex size-2 rounded-full", styles.dot)} />
          </span>
        )}
        {children}
      </span>
    </span>
  );
}