import React from "react";
const StackedProgressBar = (props) => {
    const total = props.totalValue ||
        props.segments.reduce((sum, seg) => {
            return sum + seg.value;
        }, 0);
    const heightClass = props.heightClassName || "h-4";
    const showLegend = props.showLegend !== false;
    return (React.createElement("div", { className: props.className || "" },
        React.createElement("div", { className: `flex ${heightClass} rounded-full overflow-hidden bg-gray-100`, role: "progressbar", "aria-label": "Stacked progress bar" }, props.segments.map((segment, index) => {
            if (segment.value <= 0 || total <= 0) {
                return null;
            }
            const widthPercent = (segment.value / total) * 100;
            return (React.createElement("div", { key: index, className: `${segment.color} ${heightClass} transition-all duration-300`, style: { width: `${widthPercent}%` }, title: segment.tooltip || `${segment.label}: ${segment.value}` }));
        })),
        showLegend && (React.createElement("div", { className: "flex flex-wrap gap-x-5 gap-y-1 mt-2.5" }, props.segments
            .filter((seg) => {
            return seg.value > 0;
        })
            .map((segment, index) => {
            return (React.createElement("div", { key: index, className: "flex items-center gap-1.5" },
                React.createElement("span", { className: `inline-block w-2.5 h-2.5 rounded-full ${segment.color}` }),
                React.createElement("span", { className: "text-sm text-gray-600" },
                    segment.label,
                    " ",
                    React.createElement("span", { className: "font-medium text-gray-800" },
                        "(",
                        segment.value,
                        ")"))));
        })))));
};
export default StackedProgressBar;
//# sourceMappingURL=StackedProgressBar.js.map