Badge

import * as React from "react";
import { cn } from "@/lib/utils";

const tones = {
  default: "bg-secondary text-secondary-foreground",
  outline: "border border-border text-foreground",
  success: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-400",
  warning: "bg-amber-500/14 text-amber-700 dark:text-amber-400",
  danger: "bg-destructive/12 text-destructive",
  info: "bg-sky-500/12 text-sky-700 dark:text-sky-400",
  solid: "bg-primary text-primary-foreground",
} as const;

export type BadgeTone = keyof typeof tones;

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  tone?: BadgeTone;
  size?: "sm" | "md";
}

export function Badge({ tone = "default", size = "sm", className, ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-[5px] font-medium [&_svg]:size-3",
        size === "sm" ? "h-5 px-1.5 text-[11px]" : "h-6 px-2 text-xs",
        tones[tone],
        className,
      )}
      {...props}
    />
  );
}

const dots: Record<StatusBadgeProps["status"], string> = {
  online: "bg-emerald-500",
  degraded: "bg-amber-500",
  offline: "bg-destructive",
  pending: "bg-muted-foreground",
  info: "bg-sky-500",
};

export interface StatusBadgeProps {
  status: "online" | "degraded" | "offline" | "pending" | "info";
  children: React.ReactNode;
  /** Pulse the dot, for live or in-progress states. */
  live?: boolean;
  className?: string;
}

/** A label with a colored status dot. */
export function StatusBadge({ status, children, live, className }: StatusBadgeProps) {
  return (
    <span className={cn("inline-flex items-center gap-1.5 text-xs font-medium", className)}>
      <span className="relative flex size-2">
        {live && <span className={cn("absolute inline-flex size-full animate-ping rounded-full opacity-60", dots[status])} />}
        <span className={cn("relative inline-flex size-2 rounded-full", dots[status])} />
      </span>
      {children}
    </span>
  );
}