import type { ReactNode } from "react";

const BADGE_TONES = {
  neutral: "bg-text-muted/10 text-text-secondary border-text-muted/30",
  good: "bg-success/10 text-success border-success/30",
  warn: "bg-warning/10 text-warning border-warning/30",
  bad: "bg-danger/10 text-danger border-danger/30",
  info: "bg-accent/10 text-accent border-accent/30",
};

export type BadgeTone = keyof typeof BADGE_TONES;

export function Badge({
  children,
  tone = "neutral",
  title,
}: {
  children: ReactNode;
  tone?: BadgeTone;
  title?: string;
}) {
  return (
    <span
      title={title}
      className={`inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium uppercase ${BADGE_TONES[tone]}`}
    >
      {children}
    </span>
  );
}