var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-namespace */
import { memo } from "react";
import { makeStyles, Text } from "../theme";
import { GlLogo } from "../utils/GlLogo";
import { GlCard } from "./GlCard";
import { breakpointsValues } from "../theme";
import { GlButton } from "../utils/GlButton";
export var GlLogoCard = memo(function (props) {
    var className = props.className, iconUrls = props.iconUrls, paragraph = props.paragraph, title = props.title, buttonLabel = props.buttonLabel, overlapIcons = props.overlapIcons, link = props.link;
    var _a = useStyles({
        "overlapIcons": overlapIcons !== null && overlapIcons !== void 0 ? overlapIcons : false,
    }, { props: props }), classes = _a.classes, cx = _a.cx, css = _a.css;
    return (_jsxs(GlCard, __assign({ link: link, className: cx(classes.root, className) }, { children: [iconUrls && (_jsx("div", __assign({ className: classes.iconWrapper }, { children: iconUrls
                    .map(function (url, index) { return (_jsx(GlLogo, { className: cx(classes.icon, css({
                    //"zIndex": iconUrls.length - index,
                    //"order": iconUrls.length - index
                    })), logoUrl: url }, index)); })
                    .reverse() }))), _jsxs("div", __assign({ className: classes.textWrapper }, { children: [title !== undefined && (_jsx(Text, __assign({ typo: "section heading", className: classes.title }, { children: title }))), paragraph !== undefined && (_jsx(Text, __assign({ typo: "body 1", className: classes.paragraph }, { children: paragraph })))] })), buttonLabel !== undefined && (_jsx(GlButton, __assign({ type: "submit", href: link === null || link === void 0 ? void 0 : link.href, variant: "secondary", onClick: link === null || link === void 0 ? void 0 : link.onClick, className: classes.button }, { children: buttonLabel })))] })));
});
var useStyles = makeStyles({ "name": { GlLogoCard: GlLogoCard } })(function (theme, _a) {
    var overlapIcons = _a.overlapIcons;
    return ({
        "root": {
            "padding": theme.spacing({
                "rightLeft": 3,
                "topBottom": 4,
            }),
            "boxShadow": theme.shadows[1],
            "display": "flex",
            "flexDirection": "column",
            "justifyContent": "space-between",
            "alignItems": "center",
            "margin": (function () {
                if (theme.windowInnerWidth >= breakpointsValues.lg) {
                    return undefined;
                }
                return theme.spacing(1);
            })(),
        },
        "iconWrapper": __assign({ "display": "flex", "alignItems": "center", "transform": "rotate(180deg)" }, (overlapIcons
            ? {
                "marginLeft": -theme.spacing(3),
            }
            : {})),
        "icon": __assign(__assign({ "transform": "rotate(180deg)" }, (!overlapIcons
            ? __assign({}, theme.spacing.rightLeft("margin", "".concat(theme.spacing(1), "px"))) : {
            "marginLeft": -theme.spacing(3),
        })), (function () {
            var value = (function () {
                if (theme.windowInnerWidth >= breakpointsValues.lg) {
                    return 50;
                }
                return 40;
            })();
            return {
                "width": value,
                "fill": theme.colors.palette.focus.main,
                "& svg": {
                    "width": value,
                    "height": value,
                },
            };
        })()),
        "title": {
            "marginTop": theme.spacing(4),
        },
        "paragraph": {
            "marginTop": theme.spacing(4),
        },
        "textWrapper": {
            "textAlign": "center",
            "marginBottom": theme.spacing(4),
        },
        "button": {},
    });
});
//# sourceMappingURL=GlLogoCard.js.map