import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
export function KeyDriverItem({ maximum, item, onSelect, isSelected, isFocused, }) {
    const trend = item.data.from.value < item.data.to.value ? "up" : "down";
    const width = `${(Math.abs(item.data.to.value - item.data.from.value) / maximum) * 100}%`;
    return (_jsxs("div", { className: cx("gd-kda-item", {
            "gd-kda-item-selected": isSelected,
            "gd-kda-item-focused": isFocused,
        }), onClick: onSelect, children: [
            _jsxs("div", { className: cx("gd-kda-item-text"), children: [
                    _jsx("div", { className: "gd-kda-item-text-title", children: item.data.title }), _jsx("div", { className: "gd-kda-item-text-category", children: item.data.category })
                ] }), _jsxs("div", { className: cx("gd-kda-item-value"), children: [trend === "up" ? "+" : "", item.data.formatValue(item.data.to.value - item.data.from.value)] }), _jsx("div", { className: cx("gd-kda-item-progress"), style: { "--kda-item-width": width } })
        ] }));
}
//# sourceMappingURL=KeyDriverItem.js.map