import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { mapEntityStatus, type StatusVariant } from "./StatusDot";

const statusStyles: Record<StatusVariant, string> = {
  active:  "bg-status-active-bg text-status-active-fg border-status-active-border",
  success: "bg-status-success-bg text-status-success-fg border-status-success-border",
  warning: "bg-status-warning-bg text-status-warning-fg border-status-warning-border",
  error:   "bg-status-error-bg text-status-error-fg border-status-error-border",
  neutral: "bg-status-neutral-bg text-status-neutral-fg border-status-neutral-border",
  urgent:  "bg-status-urgent-bg text-status-urgent-fg border-status-urgent-border",
};

function formatStatusText(status: string): string {
  return status.replace(/_/g, " ").toUpperCase();
}

interface StatusBadgeProps {
  status: string;
  className?: string;
}

export function StatusBadge({ status, className }: StatusBadgeProps) {
  if (!status) return null;
  const variant = mapEntityStatus(status);
  const style = statusStyles[variant];

  return (
    <Badge className={cn(style, "hover:opacity-90", className)}>
      {formatStatusText(status)}
    </Badge>
  );
}
