Badge

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

export type BadgeVariant = "neutral" | "accent" | "success" | "warning" | "danger" | "outline";

const VARIANTS: Record<BadgeVariant, { badge: string; dot: string }> = {
  neutral: { badge: "bg-da-muted text-da-muted-fg", dot: "bg-da-muted-fg" },
  accent: { badge: "bg-da-accent text-da-accent-fg", dot: "bg-da-primary" },
  success: { badge: "bg-da-success/12 text-da-fg", dot: "bg-da-success" },
  warning: { badge: "bg-da-warning/15 text-da-fg", dot: "bg-da-warning" },
  danger: { badge: "bg-da-danger/12 text-da-fg", dot: "bg-da-danger" },
  outline: { badge: "da-stroke bg-transparent text-da-muted-fg", dot: "bg-da-muted-fg" },
};

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
  /** Colored status dot before the label. */
  dot?: boolean;
  /** Pulse the dot (live states). Disabled with reduced motion. */
  pulse?: boolean;
  shape?: "rounded" | "pill";
  /** Monospace label, for IDs and codes. */
  mono?: boolean;
}

export function Badge({ variant = "neutral", dot = false, pulse = false, shape = "rounded", mono = false, className, children, ...props }: BadgeProps) {
  const v = VARIANTS[variant];
  return (
    <span
      className={cn(
        "inline-flex h-5 items-center gap-1.5 px-1.5 text-xs font-medium whitespace-nowrap",
        shape === "pill" ? "rounded-da-pill px-2" : "rounded-[5px]",
        mono && "font-da-mono text-[11px]",
        v.badge,
        className,
      )}
      {...props}
    >
      {dot && (
        <span aria-hidden className="relative flex size-1.5">
          {pulse && <span className={cn("absolute inset-0 animate-ping rounded-full opacity-70 motion-reduce:hidden", v.dot)} />}
          <span className={cn("relative size-1.5 rounded-full", v.dot)} />
        </span>
      )}
      {children}
    </span>
  );
}

export default Badge;