/**
 * components/ui/Badge.tsx
 * Status badge component — black & white theme.
 */

import { clsx } from "clsx";

type BadgeVariant =
  | "success"
  | "warning"
  | "error"
  | "info"
  | "default"
  | "purple";

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

const variants: Record<BadgeVariant, string> = {
  success: "bg-emerald-50 text-emerald-700 border border-emerald-200",
  warning: "bg-amber-50 text-amber-700 border border-amber-200",
  error: "bg-red-50 text-red-700 border border-red-200",
  info: "bg-slate-100 text-slate-700 border border-slate-200",
  purple: "bg-slate-100 text-slate-700 border border-slate-200",
  default: "bg-slate-100 text-slate-600 border border-slate-200",
};

export function Badge({
  variant = "default",
  children,
  className,
}: BadgeProps) {
  return (
    <span
      className={clsx(
        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
        variants[variant],
        className
      )}
    >
      {children}
    </span>
  );
}