import React from "react";
function getBarColor(percent) {
    if (percent > 80) {
        return "bg-red-500";
    }
    if (percent > 60) {
        return "bg-amber-500";
    }
    return "bg-emerald-500";
}
const ResourceUsageBar = (props) => {
    const percent = Math.min(Math.max(props.value, 0), 100);
    const heightClass = props.heightClassName || "h-2";
    const labelWidthClass = props.labelWidthClassName || "w-40";
    return (React.createElement("div", { className: `flex items-center gap-3 ${props.className || ""}` },
        React.createElement("div", { className: `${labelWidthClass} truncate text-sm text-gray-800 font-medium`, title: props.label }, props.label),
        props.secondaryLabel && (React.createElement("span", { className: "inline-flex px-1.5 py-0.5 text-xs rounded bg-blue-50 text-blue-700" }, props.secondaryLabel)),
        React.createElement("div", { className: `flex-1 bg-gray-100 rounded-full ${heightClass}` },
            React.createElement("div", { className: `${heightClass} rounded-full transition-all duration-300 ${getBarColor(percent)}`, style: { width: `${percent}%` } })),
        props.valueLabel && (React.createElement("span", { className: "text-xs text-gray-600 w-16 text-right font-medium tabular-nums" }, props.valueLabel))));
};
export default ResourceUsageBar;
//# sourceMappingURL=ResourceUsageBar.js.map