'use client'
import { jsx, jsxs } from 'react/jsx-runtime';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { Typography } from '../../../../components/Typography/Typography.js';
import { TypographyButton } from '../../../../components/TypographyButton/TypographyButton.js';
import { IconButton } from '../../../../components/IconButton/IconButton.js';
import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
import { Icon } from '../../../../components/Icon/Icon.js';
import { Alert } from '../../../../components/Alert/Alert.js';
import { ReactComponent as SvgClose } from '../../../../shared/assets/close.js';
import { ReactComponent as SvgFooterInfoIcon } from '../../../../shared/assets/footer-info-icon.js';
import '@dynamic-labs/iconic';
import '../../../../context/ViewContext/ViewContext.js';
import { ReactComponent as SvgFilledQuestionMark } from '../../../../shared/assets/filled-question-mark.js';
import { useWidgetContext } from '../../context/DynamicWidgetContext.js';

const WaasBackupInfoView = () => {
    const { setDynamicWidgetView } = useWidgetContext();
    const { t } = useTranslation();
    const handleBackClick = useCallback(() => setDynamicWidgetView('waas-backup'), [setDynamicWidgetView]);
    const handleCloseClick = useCallback(() => setDynamicWidgetView('account-and-security-settings'), [setDynamicWidgetView]);
    const closeButton = (jsx(IconButton, { type: 'button', onClick: handleCloseClick, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
    return (jsxs("div", { className: 'waas-backup-view', children: [jsx(ModalHeader, { trailing: closeButton, children: jsx("div", { className: 'send-balance-page-layout__header-content', children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_waas.backup_info.title', children: t('dyn_waas.backup_info.title', 'Why backup a share') }) }) }), jsx("div", { className: 'account-wrap', children: jsx("div", { className: 'settings-view__body', children: jsxs("div", { className: 'backup-content', children: [jsx("div", { className: 'backup-icon-container', children: jsx(Icon, { color: 'brand-primary', children: jsx(SvgFilledQuestionMark, { width: 64, height: 64 }) }) }), jsx(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.') }), jsx(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.') }), jsx(Alert, { icon: 
                                // eslint-disable-next-line react/jsx-wrap-multilines
                                jsx(Icon, { size: 'medium', children: jsx(SvgFooterInfoIcon, { width: 24, height: 24 }) }), variant: 'warning', copykey: 'dyn_waas.backup_info.warning_alert', children: jsxs(Typography, { variant: 'body_small', color: 'current-color', children: [jsx(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') }), jsx(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!") })] }) }), jsx("div", { className: 'backup-actions', children: jsx(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') }) })] }) }) })] }));
};

export { WaasBackupInfoView };
