import { Button, InlineNotification, Stack } from "@carbon/react";
import React from "react";
import { AppTeaserCard } from "./app-teaster-card";
import { body02 } from "../styles";
import styled from "styled-components";
const Subtitle = styled.div `
	p {
		${body02};
		text-align: center;
		white-space: pre-line;
	}
`;
export const AppTeaserCards = ({ title, subtitle, cards, cta, subtext, }) => {
    const innerColumns = new Array(cards.length).fill("428px");
    const gridTemplateColumns = `1fr ${innerColumns.join(" ")} 1fr`;
    const gridGap = "10px";
    return (React.createElement(Stack, { gap: 8 },
        React.createElement(Stack, { gap: 4 },
            React.createElement("h1", { style: { textAlign: "center" } }, title),
            React.createElement(Subtitle, null,
                React.createElement("p", null, subtitle))),
        React.createElement(Stack, { gap: 5 },
            React.createElement("div", { style: {
                    display: "grid",
                    justifyContent: "center",
                } }, cta.disabled && cta.disabledMessage ? (React.createElement(InlineNotification, { kind: "info", title: cta.disabledMessage, hideCloseButton: true })) : (React.createElement(Button, { id: "teasercards-button", onClick: cta.action, renderIcon: cta.renderIcon, isExpressive: true }, cta.text))),
            !cta.disabled && subtext && (React.createElement("div", { style: {
                    display: "grid",
                    justifyContent: "center",
                    fontSize: "14px",
                } }, subtext))),
        React.createElement(Stack, { gap: 6, orientation: "vertical" },
            React.createElement(Stack, { gap: 6 },
                React.createElement("div", { style: { display: "grid", gridTemplateColumns, gap: gridGap } }, cards.map((card, index) => (React.createElement(AppTeaserCard, { ...card, key: "teasercardz" + index, grid: { column: index + 2 } }))))))));
};
