import ErrorMessage from "../ErrorMessage/ErrorMessage";
import Pill from "../Pill/Pill";
import { Black } from "../../../Types/BrandColors";
import React from "react";
const ComponentArgumentViewer = (props) => {
    return (React.createElement("div", { className: "mt-5 mb-5" },
        React.createElement("h2", { className: "text-base font-medium text-gray-500" }, props.name),
        React.createElement("p", { className: "text-sm font-medium text-gray-400" }, props.description),
        props.arguments && props.arguments.length === 0 && (React.createElement(ErrorMessage, { message: "This component does not take any arguments." })),
        React.createElement("div", { className: "mt-3" }, props.arguments &&
            props.arguments.length > 0 &&
            props.arguments.map((argument, i) => {
                return (React.createElement("div", { key: i, className: "mt-2 mb-2 relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2" },
                    React.createElement("div", { className: "min-w-0 flex-1 flex justify-between" },
                        React.createElement("div", { className: "focus:outline-none" },
                            React.createElement("span", { className: "absolute inset-0", "aria-hidden": "true" }),
                            React.createElement("p", { className: "text-sm font-medium text-gray-900" },
                                argument.name,
                                " ",
                                React.createElement("span", { className: "text-gray-500 font-normal" },
                                    "(ID: ",
                                    argument.id,
                                    ")")),
                            React.createElement("p", { className: "truncate text-sm text-gray-500" },
                                argument.required ? "Required. " : "Optional. ",
                                argument.description)),
                        React.createElement("div", null,
                            React.createElement(Pill, { color: Black, text: argument.type })))));
            }))));
};
export default ComponentArgumentViewer;
//# sourceMappingURL=ComponentArgumentsViewer.js.map