import { Badge as KumoBadge } from "@cloudflare/kumo/components/badge";
import type { Tone } from "~/ui/tones";

type KumoBadgeVariant = NonNullable<React.ComponentProps<typeof KumoBadge>["variant"]>;

const TONE_VARIANT: Record<Tone, KumoBadgeVariant> = {
  neutral: "secondary",
  accent: "primary",
  success: "green",
  warning: "orange",
  danger: "red",
  merged: "purple",
};

type Props = { tone?: Tone; children: React.ReactNode; className?: string };

export function Badge({ tone = "neutral", children, className }: Props) {
  return (
    <KumoBadge variant={TONE_VARIANT[tone]} className={className}>
      {children}
    </KumoBadge>
  );
}