import { clsx } from "clsx";

type Variant = "success" | "warning" | "danger" | "neutral" | "accent";

interface BadgeProps {
    variant?: Variant;
    children: React.ReactNode;
    className?: string;
}

/*
 * site/'s .chip: mono, uppercase, widely tracked, drawn in currentColor with
 * no fill. Every badge in this app holds one short state word, which is what
 * the treatment is for.
 *
 * State is never carried by colour alone the word itself says it, and the
 * three state variants add a dot so the distinction survives a monochrome
 * screen as well as it survives colour blindness.
 */
const variantClasses: Record<Variant, string> = {
    success: "text-success",
    warning: "text-warning",
    danger: "text-danger",
    neutral: "text-text-secondary",
    accent: "text-accent",
};

export function Badge({ variant = "neutral", children, className }: BadgeProps) {
    const hasState = variant === "success" || variant === "warning" || variant === "danger";

    return (
        <span
            className={clsx(
                "inline-flex items-center gap-1.5 whitespace-nowrap rounded-sm border border-current px-1.5 py-0.5 font-mono text-[0.65rem] uppercase tracking-[0.08em]",
                variantClasses[variant],
                className,
            )}
        >
            {hasState && <span className="h-1.5 w-1.5 rounded-full bg-current" />}
            {children}
        </span>
    );
}
