import type { ReactNode } from "react";

const TONE: Record<string, string> = {
  neutral: "bg-surface-muted text-foreground border-border",
  success: "bg-green-100 text-green-800 border-green-200",
  warning: "bg-amber-100 text-amber-800 border-amber-200",
  danger: "bg-red-100 text-red-800 border-red-200",
  info: "bg-blue-100 text-blue-800 border-blue-200",
  primary: "bg-primary/10 text-primary border-primary/20",
};

export function StatusBadge({
  status,
  tone,
  children,
}: {
  status?: string;
  tone?: keyof typeof TONE;
  children?: ReactNode;
}) {
  const computedTone =
    tone ??
    (status === "active" || status === "published"
      ? "success"
      : status === "draft" || status === "pending"
        ? "warning"
        : status === "suspended" ||
            status === "cancelled" ||
            status === "deleted" ||
            status === "expired"
          ? "danger"
          : status === "trial"
            ? "info"
            : status === "archived" || status === "inactive" || status === "disabled"
              ? "neutral"
              : "neutral");
  const label =
    children ?? (status ? status.replace(/_/g, " ") : "—");
  return (
    <span
      className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium capitalize ${
        TONE[computedTone]
      }`}
    >
      {label}
    </span>
  );
}