import React from "react";
const ComponentReturnValueViewer = (props) => {
    return (React.createElement("div", null,
        props.name && (React.createElement("h2", { className: "text-sm font-semibold text-gray-600" }, props.name)),
        props.description && (React.createElement("p", { className: "text-xs text-gray-400 mb-2" }, props.description)),
        props.returnValues && props.returnValues.length === 0 && (React.createElement("p", { className: "text-xs text-gray-400 italic" }, "This step does not return any data.")),
        React.createElement("div", null, props.returnValues &&
            props.returnValues.length > 0 &&
            props.returnValues.map((returnValue, i) => {
                return (React.createElement("div", { key: i, style: {
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        gap: "0.625rem",
                        padding: "0.5rem 0.75rem",
                        borderRadius: "8px",
                        backgroundColor: "#f8fafc",
                        border: "1px solid #f1f5f9",
                        marginBottom: "0.375rem",
                    } },
                    React.createElement("div", { style: { minWidth: 0, flex: 1 } },
                        React.createElement("p", { style: {
                                fontSize: "0.8125rem",
                                fontWeight: 500,
                                color: "#334155",
                                margin: 0,
                                lineHeight: "1.25rem",
                            } },
                            returnValue.name,
                            React.createElement("span", { style: {
                                    color: "#94a3b8",
                                    fontWeight: 400,
                                    fontSize: "0.6875rem",
                                    marginLeft: "0.375rem",
                                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
                                } }, returnValue.id)),
                        returnValue.description && (React.createElement("p", { style: {
                                fontSize: "0.75rem",
                                color: "#94a3b8",
                                margin: 0,
                                lineHeight: "1rem",
                            } }, returnValue.description))),
                    React.createElement("span", { style: {
                            fontSize: "0.6875rem",
                            fontWeight: 500,
                            color: "#6366f1",
                            backgroundColor: "#eef2ff",
                            padding: "0.125rem 0.5rem",
                            borderRadius: "100px",
                            whiteSpace: "nowrap",
                            border: "1px solid #e0e7ff",
                        } }, returnValue.type)));
            }))));
};
export default ComponentReturnValueViewer;
//# sourceMappingURL=ComponentReturnValueViewer.js.map