import type { ReactNode } from "react";
import type { StatusTone } from "./status";
import { StatusDot } from "./StatusDot";

type BadgeTone = StatusTone | "accent";

interface BadgeProps {
  tone?: BadgeTone;
  /** Render a leading status dot inside the badge. */
  dot?: boolean;
  children: ReactNode;
}

/**
 * A pill label using the status vocabulary. With `dot`, pairs the label with a
 * matching StatusDot so the dot+label convention reads consistently.
 */
export function Badge({ tone = "neutral", dot = false, children }: BadgeProps) {
  return (
    <span className={`badge badge--${tone}`}>
      {dot && tone !== "accent" && <StatusDot tone={tone} />}
      {children}
    </span>
  );
}