/**
 * ClarificationBadge - Small red count badge for fields with pending clarifications.
 *
 * Positioned in the field controls area, integrated with UnifiedFieldControls.
 */
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../utils/cn.js';
export const ClarificationBadge = React.memo(function ClarificationBadge({ count, on_click, class_name, }) {
    if (count <= 0)
        return null;
    return (_jsx("button", { type: "button", onClick: on_click, className: cn('cls_clarification_badge', 'inline-flex items-center justify-center', 'min-w-[18px] h-[18px] px-1', 'rounded-full text-[10px] font-bold leading-none', 'bg-red-500 text-white', 'hover:bg-red-600 transition-colors', 'cursor-pointer', class_name), title: `${count} pending clarification${count !== 1 ? 's' : ''}`, "aria-label": `${count} pending clarification${count !== 1 ? 's' : ''}`, children: count }));
});
//# sourceMappingURL=clarification_badge.js.map