import 'core-js/modules/es.object.assign.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { styled, Box } from '@mui/material';
import { IconFactory } from '../../atom/IconFactory/IconFactory.js';
import { IconFont } from '../../atom/IconFont/IconFont.js';
import Loader from '../../atom/Loader/Loader.js';
import { Typography } from '../../atom/Typography/Typography.js';

/**
 * Displays a modal component for wallet action that requires user attention.
 * @param {string} [props.title] - The title of the modal.
 * @param {string} [props.text] - The text content of the modal.
 * @param {'loading' | 'success'} props.state - The state of the modal. Can be 'loading' or 'success'.
 *  @param {'React.ReactNode'} props.contents - Additional contents to be rendered inside the modal.
 */
const WalletActionRequiredModal = ({
  title,
  text,
  state,
  contents
}) => {
  return jsxs(StyledContainer, Object.assign({
    sx: {
      backgroundColor: 'primary.dark'
    }
  }, {
    children: [jsxs(StyledTopContent, {
      children: [state === 'loading' ? jsx(Loader, {}) : jsx(IconFont, {
        name: "check_circle",
        fontSize: 48
      }), title != null && jsx(Typography, Object.assign({
        variant: "h3"
      }, {
        children: title
      }))]
    }), text != null && jsx(Typography, Object.assign({
      variant: "body2",
      align: "center",
      color: "text.secondary"
    }, {
      children: text
    })), contents, jsxs(Box, Object.assign({
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: "100%",
      mt: 4
    }, {
      children: [jsx(Typography, Object.assign({
        variant: "caption",
        color: "secondary.light"
      }, {
        children: "Powered by"
      })), jsx(IconFactory, {
        name: "FV"
      })]
    }))]
  }));
};
const StyledContainer = styled(Box)(({
  theme
}) => ({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  width: '100%',
  padding: '1.5rem',
  gap: '2rem',
  border: '1px solid #767676',
  borderRadius: '0.5rem',
  [theme.breakpoints.up('md')]: {
    width: '648px',
    padding: '3rem'
  }
}));
const StyledTopContent = styled(Box)({
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  textAlign: 'center',
  gap: '1rem'
});

export { WalletActionRequiredModal as default };
