/**
 * @factory/ui — Badge (status pill). Status colors come from the `--status-*`
 * tokens (derived from @factory/shared STATUS_COLORS in tokens.ts) — never
 * hard-coded hex.
 */
import * as React from "react";
import { clsx } from "clsx";
import { STATUS_COLORS } from "@factory/shared/constants";

export type BadgeStatus = (typeof STATUS_COLORS)[number];

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** One of the 9 shared status colors → `var(--status-<name>)`. */
  status?: BadgeStatus;
  /** Outline-style variant (translucent look via color-mix). */
  variant?: "solid" | "outline";
}

export function Badge({ status = "gray", variant = "outline", className, ...props }: BadgeProps) {
  return (
    <span
      className={clsx(
        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
        className,
      )}
      style={
        variant === "solid"
          ? {
              color: `var(--block-color-${status})`,
              backgroundColor: `var(--block-color-${status}-bg)`,
            }
          : {
              color: `var(--status-${status})`,
              border: `1px solid var(--status-${status})`,
            }
      }
      {...props}
    />
  );
}