Badge

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

export type BadgeVariant = "neutral" | "primary" | "secondary" | "accent" | "success" | "warning" | "danger" | "ink";

const VARIANTS: Record<BadgeVariant, string> = {
  neutral: "bg-da-surface text-da-surface-fg",
  primary: "bg-da-primary text-da-primary-fg",
  secondary: "bg-da-secondary text-da-secondary-fg",
  accent: "bg-da-accent text-da-accent-fg",
  success: "bg-da-success text-da-success-fg",
  warning: "bg-da-warning text-da-warning-fg",
  danger: "bg-da-danger text-da-danger-fg",
  ink: "bg-da-fg text-da-bg",
};

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  variant?: BadgeVariant;
  size?: "sm" | "md";
  /** Square status dot before the label. */
  dot?: boolean;
  /** Tilt the badge like a sticker (use sparingly — one per view). */
  sticker?: boolean;
}

export function Badge({ variant = "neutral", size = "sm", dot = false, sticker = false, className, children, ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        "da-stroke inline-flex items-center gap-1.5 font-da-mono font-bold tracking-da-label whitespace-nowrap uppercase",
        size === "sm" ? "px-1.5 py-0.5 text-[10px]" : "px-2.5 py-1 text-xs",
        sticker && "-rotate-3 shadow-da-sm",
        VARIANTS[variant],
        className,
      )}
      {...props}
    >
      {dot && <span aria-hidden className="size-2 bg-current" />}
      {children}
    </span>
  );
}

export default Badge;