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

const NoMetamaskInstalledModal = ({
  handleGoBack
}) => {
  return jsxs(Modal
  /**
   * These tailwind usages should be fine as classNames will be resolved
   * by the component-library
   */, Object.assign({
    /**
     * These tailwind usages should be fine as classNames will be resolved
     * by the component-library
     */
    className: "max-w-[326px] md:max-w-[636px] rounded-lg px-0 pt-4 pb-0",
    contentClassName: "px-0 !pb-0",
    headerClassName: "px-8",
    header: jsxs("div", Object.assign({
      style: {
        display: 'flex',
        gap: '0.5rem'
      }
    }, {
      children: [jsx(IconFont, {
        name: "warning",
        fontSize: 24
      }), jsx(Typography, Object.assign({
        variant: "body1"
      }, {
        children: "Metamask not installed"
      }))]
    }))
  }, {
    children: [jsx(Divider, {
      sx: {
        borderColor: 'secondary.main'
      }
    }), jsxs("div", Object.assign({
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '2rem',
        padding: '2rem'
      }
    }, {
      children: [jsxs(Typography, Object.assign({
        variant: "body2",
        color: "text.secondary"
      }, {
        children: ["You need to install Metamask to continue. Please install Metamask then refresh the page.", ' ']
      })), jsxs(Box, Object.assign({
        sx: {
          display: 'flex',
          flexDirection: {
            md: 'row',
            lg: 'column-reverse'
          },
          justifyContent: 'center',
          width: {
            md: 'unset',
            lg: '100%'
          },
          gap: '1rem'
        }
      }, {
        children: [jsx(Button, Object.assign({
          variant: "text",
          sx: {
            whiteSpace: 'nowrap',
            width: {
              md: 'auto',
              lg: '100%'
            }
          },
          onClick: handleGoBack
        }, {
          children: "Go back"
        })), jsx(Button, Object.assign({
          sx: {
            width: {
              md: 'auto',
              lg: '100%'
            }
          },
          variant: "outlined",
          startIcon: jsx(IconFactory, {
            name: "Metamask"
          })
        }, {
          children: jsx("a", Object.assign({
            target: "_blank",
            href: "https://metamask.io/download/",
            rel: "noreferrer"
          }, {
            children: "Install Metamask"
          }))
        }))]
      }))]
    }))]
  }));
};

export { NoMetamaskInstalledModal as default };
