nexus/ui/src/components/GroupBadge.tsx

import { X, Loader2 } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

type GroupBadgeProps = {
  name: string;
  isBuiltin: boolean;
  skillCount?: number;
  description?: string | null;
  onRemove?: () => void;
  removing?: boolean;
};

export function GroupBadge({
  name,
  isBuiltin,
  skillCount,
  description: _description,
  onRemove,
  removing = false,
}: GroupBadgeProps) {
  const tooltipText = isBuiltin
    ? `${name} · built-in${skillCount != null ? ` · ${skillCount} skills` : ""}`
    : `${name}${skillCount != null ? ` · ${skillCount} skills` : ""}`;

  if (isBuiltin) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <Badge
            variant="secondary"
            className={cn(
              "cursor-default select-none text-sm font-semibold",
              "hover:bg-accent/30",
              "focus-visible:ring-ring focus-visible:ring-[3px]",
            )}
          >
            {name}
          </Badge>
        </TooltipTrigger>
        <TooltipContent side="top">{tooltipText}</TooltipContent>
      </Tooltip>
    );
  }

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Badge
          variant="outline"
          className={cn(
            "cursor-default select-none gap-1 text-sm font-semibold",
            "hover:bg-accent/50",
            "focus-visible:ring-ring focus-visible:ring-[3px]",
          )}
        >
          {name}
          {onRemove && (
            <button
              type="button"
              aria-label={`Remove ${name}`}
              disabled={removing}
              onClick={(e) => {
                e.stopPropagation();
                onRemove();
              }}
              className="ml-0.5 rounded-full p-0.5 transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
            >
              {removing ? (
                <Loader2 className="h-3 w-3 animate-spin" />
              ) : (
                <X className="h-3 w-3" />
              )}
            </button>
          )}
        </Badge>
      </TooltipTrigger>
      <TooltipContent side="top">{tooltipText}</TooltipContent>
    </Tooltip>
  );
}