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

type Tone = "default" | "success" | "warning" | "danger" | "info" | "muted" | "outline";

const toneStyles: Record<Tone, string> = {
  default: "bg-primary/15 text-primary border-primary/30",
  success: "bg-success/15 text-success border-success/30",
  warning: "bg-warning/15 text-warning border-warning/40",
  danger: "bg-destructive/15 text-destructive border-destructive/40",
  info: "bg-info/15 text-info border-info/40",
  muted: "bg-muted text-muted-foreground border-border",
  outline: "bg-transparent text-foreground/80 border-border",
};

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  tone?: Tone;
  dot?: boolean;
}

export function Badge({ tone = "default", dot, className, children, ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-2xs font-medium uppercase tracking-wide",
        toneStyles[tone],
        className,
      )}
      {...props}
    >
      {dot && <span className={cn("dot", `dot-${tone === "default" ? "success" : tone}`)} />}
      {children}
    </span>
  );
}