import { Button, Stack, Tag, Tile } from "@carbon/react";
import { ArrowRight } from "@carbon/react/icons";
import React from "react";
import { TAB_TYPES } from "./tabs/tabContent";
import ReactMarkdown from "react-markdown";
import styled from "styled-components";
const TileHeading = styled.h6 `
	font-size: var(--cds-heading-compact-01-font-size);
	font-weight: var(--cds-heading-compact-01-font-weight);
	line-height: var(--cds-heading-compact-01-line-height);
	letter-spacing: var(--cds-heading-compact-01-letter-spacing);
`;
const TileDescription = styled.p `
	height: 50px;
	color: var(--cds-text-secondary);
`;
const TileStack = styled.div `
	display: flex;
	flex-direction: column;
`;
export const HelpCenterTile = ({ tile, tabType, origin, mixpanelTrack }) => {
    const { title, description, timeToComplete, cta, image, link, card_id } = tile;
    if (tabType === TAB_TYPES.Grid) {
        return (React.createElement(Tile, { style: {
                justifySelf: "start",
                width: "300px",
            }, className: "cds--layer-two" },
            React.createElement(Stack, { orientation: "vertical", gap: 3 },
                React.createElement("img", { src: image, alt: title }),
                React.createElement(TileStack, null,
                    React.createElement(TileHeading, null, title),
                    React.createElement(TileDescription, null, description),
                    React.createElement("div", { style: { marginLeft: "-4px", marginTop: "12px" } }, (() => {
                        let content = React.createElement("div", { style: { height: "32px" } });
                        if (timeToComplete) {
                            content = (React.createElement(Tag, { type: "warm-gray", size: "sm", title: timeToComplete }, timeToComplete));
                        }
                        return content;
                    })()))),
            React.createElement(Button, { size: "sm", as: "a", href: link, target: "_blank", onClick: () => {
                    mixpanelTrack?.(`helpcenter:click`, {
                        from: origin,
                        to: card_id,
                    });
                }, renderIcon: ArrowRight, kind: "tertiary", className: "cds--switcher__item", style: { alignSelf: "end", marginTop: "10px", maxWidth: "100%" } }, cta)));
    }
    return (React.createElement(Tile, { style: {
            justifySelf: "start",
            width: "214px",
            height: "initial",
        }, className: "cds--layer-two", onClick: () => {
            mixpanelTrack?.(`helpcenter:click`, {
                to: card_id,
                from: origin,
            });
        } },
        React.createElement(Stack, { orientation: "vertical", gap: 3 },
            React.createElement("img", { src: image, alt: title }),
            React.createElement(Stack, null,
                React.createElement("h5", null, title),
                React.createElement(ReactMarkdown, { linkTarget: "_blank" }, description)))));
};
