import Button from "../Button/Button";
import useTranslateValue from "../../Utils/Translation";
import React from "react";
const Card = (props) => {
    const { translateValue } = useTranslateValue();
    const noRightElementsOrButtons = !props.rightElement && (!props.buttons || props.buttons.length === 0);
    const translatedTitle = translateValue(props.title);
    const translatedDescription = translateValue(props.description);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { "data-testid": "card", className: `mb-5 ${props.className || ""}` },
            React.createElement("div", { className: "bg-white border border-gray-200 rounded-xl shadow-sm overflow-visible" },
                React.createElement("div", { className: "py-6 px-5 md:px-6" },
                    React.createElement("div", { className: "flex flex-col md:flex-row md:justify-between md:items-start" },
                        React.createElement("div", { className: `${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}` },
                            translatedTitle && (React.createElement("h2", { "data-testid": "card-details-heading", id: "card-details-heading", className: "text-lg font-semibold leading-6 text-gray-900" }, translatedTitle)),
                            translatedDescription && (React.createElement("p", { "data-testid": "card-description", className: "mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed" }, translatedDescription))),
                        (props.rightElement ||
                            (props.buttons && props.buttons.length > 0)) && (React.createElement("div", { className: "flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0 items-center" },
                            props.rightElement && (React.createElement("div", { className: "mb-2 md:mb-0 md:mr-3" }, props.rightElement)),
                            props.buttons && props.buttons.length > 0 && (React.createElement("div", { className: "flex flex-wrap items-center gap-1.5" }, props.buttons.map((button, i) => {
                                return (React.createElement("div", { key: i, className: "flex items-center" },
                                    React.isValidElement(button) ? button : null,
                                    React.isValidElement(button) ? null : (React.createElement(Button, { key: i, title: button.title, buttonStyle: button.buttonStyle, buttonSize: button.buttonSize, className: button.className, onClick: () => {
                                            if (button.onClick) {
                                                button.onClick();
                                            }
                                        }, disabled: button.disabled, icon: button.icon, shortcutKey: button.shortcutKey, dataTestId: "card-button", isLoading: button.isLoading }))));
                            })))))),
                    props.children && (React.createElement("div", { className: props.bodyClassName || "mt-4" }, props.children)))))));
};
export default Card;
//# sourceMappingURL=Card.js.map