import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BackgroundImage, Button, RouterLink, YFMWrapper } from "../../components/index.js";
import { useTheme } from "../../gravity-blocks/context/theme/index.js";
import { block, getThemedValue } from "../../utils/index.js";
import './BannerCard.css';
const b = block('banner-card');
export const BannerCard = (props) => {
    const { title, subtitle, button, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
    const theme = useTheme();
    const contentStyle = {};
    const { url, text, target, theme: buttonTheme = 'raised' } = button || {};
    if (color) {
        contentStyle.backgroundColor = getThemedValue(color, theme);
    }
    return (_jsx("div", { className: b({ theme: textTheme, ['media-view']: mediaView }), children: _jsxs("div", { className: b('content'), style: contentStyle, children: [_jsxs("div", { className: b('info'), children: [_jsxs("div", { className: b('text'), children: [_jsx(YFMWrapper, { tagName: "h2", contentClassName: b('title'), content: title, modifiers: {
                                        constructor: true,
                                    } }), subtitle && (_jsx(YFMWrapper, { contentClassName: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))] }), url && (_jsx(RouterLink, { href: url, children: _jsx(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text ?? '', url: url, target: target }) }))] }), _jsx(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress })] }) }));
};
export default BannerCard;
//# sourceMappingURL=BannerCard.js.map
