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

export function Tag({
  children,
  tone = "quiet",
  className,
}: {
  children: React.ReactNode;
  tone?: "quiet" | "accent" | "ok" | "warn" | "error";
  className?: string;
}) {
  return (
    <span
      className={cn(
        "inline-flex items-center gap-1 rounded-full px-2 py-px text-[12px] font-medium leading-[18px] whitespace-nowrap",
        tone === "quiet" && "bg-neutral text-ink-2",
        tone === "accent" && "bg-accent-soft text-accent",
        tone === "ok" && "bg-ok-muted text-ok",
        tone === "warn" && "bg-warn-muted text-warn",
        tone === "error" && "bg-error-muted text-error",
        className,
      )}
    >
      {children}
    </span>
  );
}

export function statusTone(status: string): "quiet" | "accent" | "ok" | "warn" | "error" {
  if (status === "done") return "ok";
  if (status === "doing" || status === "active") return "accent";
  if (status === "paused" || status === "med") return "warn";
  if (status === "high" || status === "blocked") return "error";
  return "quiet";
}