import { clsx } from "clsx";
import type { ReactNode } from "react";

export function Chip({ children, tone = "mint", className }: { children: ReactNode; tone?: "mint" | "indigo" | "saffron" | "coral"; className?: string }) {
  const tones = {
    mint: "bg-mint/12 text-forest ring-mint/20 dark:text-mint",
    indigo: "bg-indigo/12 text-indigo ring-indigo/20",
    saffron: "bg-saffron/14 text-[#8a5a12] ring-saffron/25 dark:text-saffron",
    coral: "bg-coral/12 text-coral ring-coral/20"
  };
  return <span className={clsx("inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ring-1", tones[tone], className)}>{children}</span>;
}