import { ReactNode } from "react";

type Tone = "emerald" | "amber" | "red" | "neutral" | "teal";

const tones: Record<Tone, string> = {
  emerald: "bg-emerald-light text-emerald",
  teal: "bg-teal-light text-teal",
  amber: "bg-amber-50 text-warning",
  red: "bg-red-50 text-error",
  neutral: "bg-sand text-muted",
};

export default function Badge({ children, tone = "neutral" }: { children: ReactNode; tone?: Tone }) {
  return (
    <span
      className={`inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold ${tones[tone]}`}
    >
      {children}
    </span>
  );
}

export function statusTone(status: string): Tone {
  switch (status) {
    case "open":
    case "approved":
    case "completed":
      return "emerald";
    case "pending":
      return "amber";
    case "rejected":
    case "closed":
      return "red";
    default:
      return "neutral";
  }
}