import React, { useMemo, useRef } from 'react';
import { HtmlIFrame } from './HtmlIFrame';
export default function NotiPreviewPane({ data, headerH, maxMenuH, tabsH }) {
    var _a, _b;
    const wrapRef = useRef(null);
    const cardRef = useRef(null);
    const availableH = useMemo(() => Math.max(0, maxMenuH - headerH - tabsH), [maxMenuH, headerH, tabsH]);
    return (React.createElement("div", { className: 'h-full min-h-0' },
        React.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.createElement("div", { ref: cardRef, className: 'bg-white p-3' },
            React.createElement(HtmlIFrame, { className: 'w-full', html: (_a = data.html) !== null && _a !== void 0 ? _a : '', id: (_b = data.id) !== null && _b !== void 0 ? _b : 'preview' }))) : (React.createElement("div", { className: 'flex h-full items-center justify-center text-sm text-gray-500' })))));
}
//# sourceMappingURL=NotiPreviewPane.js.map