'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactI18next = require('react-i18next');
var Typography = require('../../../../components/Typography/Typography.cjs');
var TypographyButton = require('../../../../components/TypographyButton/TypographyButton.cjs');
var IconButton = require('../../../../components/IconButton/IconButton.cjs');
var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
var Icon = require('../../../../components/Icon/Icon.cjs');
var Alert = require('../../../../components/Alert/Alert.cjs');
var close = require('../../../../shared/assets/close.cjs');
var footerInfoIcon = require('../../../../shared/assets/footer-info-icon.cjs');
require('@dynamic-labs/iconic');
require('../../../../context/ViewContext/ViewContext.cjs');
var filledQuestionMark = require('../../../../shared/assets/filled-question-mark.cjs');
var DynamicWidgetContext = require('../../context/DynamicWidgetContext.cjs');

const WaasBackupInfoView = () => {
    const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
    const { t } = reactI18next.useTranslation();
    const handleBackClick = React.useCallback(() => setDynamicWidgetView('waas-backup'), [setDynamicWidgetView]);
    const handleCloseClick = React.useCallback(() => setDynamicWidgetView('account-and-security-settings'), [setDynamicWidgetView]);
    const closeButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleCloseClick, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
    return (jsxRuntime.jsxs("div", { className: 'waas-backup-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, children: jsxRuntime.jsx("div", { className: 'send-balance-page-layout__header-content', children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup_info.title', children: t('dyn_waas.backup_info.title', 'Why backup a share') }) }) }), jsxRuntime.jsx("div", { className: 'account-wrap', children: jsxRuntime.jsx("div", { className: 'settings-view__body', children: jsxRuntime.jsxs("div", { className: 'backup-content', children: [jsxRuntime.jsx("div", { className: 'backup-icon-container', children: jsxRuntime.jsx(Icon.Icon, { color: 'brand-primary', children: jsxRuntime.jsx(filledQuestionMark.ReactComponent, { width: 64, height: 64 }) }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup_info.description', children: t('dyn_waas.backup_info.description', 'Your account uses strong security behind the scenes. Backing up a share adds additional security to your account by requiring the share to be retrieved if your account is used on another device.') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_waas.backup_info.storage', children: t('dyn_waas.backup_info.storage', 'You can store this backup share in a secure cloud.') }), jsxRuntime.jsx(Alert.Alert, { icon: 
                                // eslint-disable-next-line react/jsx-wrap-multilines
                                jsxRuntime.jsx(Icon.Icon, { size: 'medium', children: jsxRuntime.jsx(footerInfoIcon.ReactComponent, { width: 24, height: 24 }) }), variant: 'warning', copykey: 'dyn_waas.backup_info.warning_alert', children: jsxRuntime.jsxs(Typography.Typography, { variant: 'body_small', color: 'current-color', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', copykey: 'dyn_waas.backup_info.important', style: { color: 'var(--default-alert-1, #DD8500)' }, children: t('dyn_waas.backup_info.important', 'Important') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', copykey: 'dyn_waas.backup_info.warning', children: t('dyn_waas.backup_info.warning', "Make sure you don't lose access to the backup share or you will not be able to restore this account!") })] }) }), jsxRuntime.jsx("div", { className: 'backup-actions', children: jsxRuntime.jsx(TypographyButton.TypographyButton, { dataTestId: 'back-button', onClick: handleBackClick, buttonClassName: 'backup-button', typographyProps: {
                                        color: 'primary',
                                        weight: 'bold',
                                    }, copykey: 'dyn_waas.backup_info.back', buttonPadding: 'small', children: t('dyn_waas.backup_info.back', 'Back') }) })] }) }) })] }));
};

exports.WaasBackupInfoView = WaasBackupInfoView;
