import React from "react";
import Icon from "../../Icon/Icon";
import IconProp from "../../../../Types/Icon/IconProp";
const TelemetryFacetValueRow = (props) => {
    const barWidth = props.maxCount > 0
        ? Math.max(4, Math.round((props.count / props.maxCount) * 100))
        : 0;
    const displayLabel = props.displayValue || props.value || "(empty)";
    const isActive = props.isActive || false;
    return (React.createElement("div", { className: "group flex items-center gap-2 py-0.5" },
        React.createElement("button", { type: "button", className: `flex min-w-0 flex-1 items-center gap-2 rounded px-1.5 py-0.5 text-left transition-colors ${isActive ? "bg-indigo-50 ring-1 ring-indigo-200" : "hover:bg-gray-50"}`, onClick: () => {
                props.onInclude(props.value);
            }, title: isActive
                ? `Remove filter: ${displayLabel}`
                : `Filter to ${displayLabel}` },
            isActive ? (React.createElement("span", { className: "flex h-3.5 w-3.5 flex-none items-center justify-center rounded bg-indigo-500" },
                React.createElement(Icon, { icon: IconProp.Check, className: "h-2.5 w-2.5 text-white" }))) : props.color ? (React.createElement("span", { className: "h-2.5 w-2.5 flex-none rounded-full", style: { backgroundColor: props.color } })) : (React.createElement("span", { className: "h-2.5 w-2.5 flex-none rounded-full bg-gray-300" })),
            React.createElement("span", { className: `min-w-0 truncate text-[12px] ${isActive ? "font-medium text-indigo-700" : "text-gray-700"}` }, displayLabel)),
        React.createElement("div", { className: "flex items-center gap-1.5" },
            React.createElement("div", { className: "w-12" },
                React.createElement("div", { className: "h-1.5 w-full rounded-full bg-gray-100" },
                    React.createElement("div", { className: `h-1.5 rounded-full transition-all ${isActive ? "opacity-100" : "opacity-70"}`, style: {
                            width: `${barWidth}%`,
                            backgroundColor: isActive
                                ? "#6366f1"
                                : props.color || "#9ca3af",
                        } }))),
            React.createElement("span", { className: `min-w-[2rem] text-right font-mono text-[10px] tabular-nums ${isActive ? "font-medium text-indigo-600" : "text-gray-400"}` }, props.count.toLocaleString())),
        React.createElement("button", { type: "button", className: "hidden h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:flex", onClick: (e) => {
                e.stopPropagation();
                props.onExclude(props.value);
            }, title: `Exclude ${displayLabel}` }, "-")));
};
export default TelemetryFacetValueRow;
//# sourceMappingURL=TelemetryFacetValueRow.js.map