import { PHXBox } from '../Box';
import { PHXButton } from '../Button';
import { PHXDivider } from '../FormTarget';
import { PHXTextV2 } from '../TextV2';
import { MobilePreview } from './mobile-preview/mobile-preview';
import React from 'react';
export const PHXPreviewNoti = ({ onSendTest, previewMobiles, title }) => (React.createElement("div", { className: 'flex flex-col gap-4' },
    React.createElement("div", { className: 'flex flex-col items-start justify-between gap-2 rounded-xl bg-gray-100 p-3 sm:flex-row sm:items-center sm:gap-0' },
        React.createElement(PHXTextV2, { size: 'caption', weight: 'semibold' }, title),
        onSendTest && (React.createElement(PHXButton, { onClick: onSendTest, secondary: true, size: 'micro' }, "G\u1EEDi th\u1EED nghi\u1EC7m"))), previewMobiles === null || previewMobiles === void 0 ? void 0 :
    previewMobiles.map((mobile, index) => (React.createElement("div", { key: index, className: 'flex flex-col ' },
        React.createElement(MobilePreview, { ...mobile }),
        index < previewMobiles.length - 1 && (React.createElement(PHXBox, { mt: 'snappy' },
            React.createElement(PHXDivider, null))))))));
//# sourceMappingURL=preview-noti.js.map