"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotiPreviewPane;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const HtmlIFrame_1 = require("./HtmlIFrame");
function NotiPreviewPane({ data, headerH, maxMenuH, tabsH }) {
    var _a, _b;
    const wrapRef = (0, react_1.useRef)(null);
    const cardRef = (0, react_1.useRef)(null);
    const availableH = (0, react_1.useMemo)(() => Math.max(0, maxMenuH - headerH - tabsH), [maxMenuH, headerH, tabsH]);
    return (react_1.default.createElement("div", { className: 'h-full min-h-0' },
        react_1.default.createElement("div", { ref: wrapRef, className: [
                'h-full min-h-0 px-3 pb-6',
                'overflow-y-auto',
                'overflow-x-hidden',
                '[scrollbar-gutter:stable]',
            ].join(' '), style: { height: `${availableH}px` } }, data ? (react_1.default.createElement("div", { ref: cardRef, className: 'bg-white p-3' },
            react_1.default.createElement(HtmlIFrame_1.HtmlIFrame, { className: 'w-full', html: (_a = data.html) !== null && _a !== void 0 ? _a : '', id: (_b = data.id) !== null && _b !== void 0 ? _b : 'preview' }))) : (react_1.default.createElement("div", { className: 'flex h-full items-center justify-center text-sm text-gray-500' })))));
}
//# sourceMappingURL=NotiPreviewPane.js.map