import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

type BadgeProps = {
  children: ReactNode;
  className?: string;
  tone?: "blue" | "slate" | "green";
};

const tones = {
  blue: "border-primary/15 bg-primary-50/80 text-primary",
  slate: "border-slate-200/80 bg-white/70 text-slate-700 shadow-[inset_0_1px_0_rgb(255_255_255_/_0.7)]",
  green: "border-emerald-200 bg-emerald-50 text-emerald-700",
};

export function Badge({ children, className, tone = "blue" }: BadgeProps) {
  return (
    <span
      className={cn(
        "inline-flex w-fit items-center rounded-full border px-3 py-1 text-xs font-semibold tracking-[0.01em]",
        tones[tone],
        className,
      )}
    >
      {children}
    </span>
  );
}