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

interface Props {
  value: string | null | undefined;
  /** `sm` for table cells, `md` for the detail header. */
  size?: "sm" | "md";
  /** Show the state icon alongside the dot. Off in dense tables. */
  withIcon?: boolean;
  className?: string;
}

/**
 * The one status pill. Colour, label and icon all come from lib/workflow, so a
 * state looks identical in a table cell, a detail header and a chart legend.
 */
export default function StatusBadge({ value, size = "sm", withIcon = false, className }: Props) {
  const status = resolveStatus(value);
  if (!status) return null;

  const { label, tone, pulse, icon: Icon } = status;

  return (
    <span
      className={cn(
        "inline-flex shrink-0 items-center gap-1.5 rounded-full border font-semibold",
        tone.bg,
        tone.border,
        tone.text,
        size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm",
        className,
      )}
    >
      {withIcon ? (
        <Icon className={size === "sm" ? "size-3" : "size-3.5"} aria-hidden />
      ) : (
        <span
          className={cn(
            "size-1.5 shrink-0 rounded-full",
            tone.solid,
            // Only the in-progress state pulses, so motion means "working".
            pulse && "animate-pulse",
          )}
          aria-hidden
        />
      )}
      {label}
    </span>
  );
}