import PropTypes from 'prop-types';
import DID from '@arcblock/ux/lib/DID';
import Box from '@mui/material/Box';
import Img from '@arcblock/ux/lib/Img';
import { useTheme } from '@mui/material';
import { mergeDarkStyle, getProxyImageUrl } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
DAPPPreview.propTypes = {
  data: PropTypes.object.isRequired,
  // eslint-disable-next-line react/require-default-props
  locale: PropTypes.string
};
function DAPPPreview({
  data,
  locale = 'en'
}) {
  const theme = useTheme();
  const isDark = theme.palette.mode === 'dark';
  return /*#__PURE__*/_jsxs("a", {
    href: data.url,
    target: "_blank",
    style: {
      display: 'flex',
      textDecoration: 'none',
      color: 'initial'
    },
    onClick: e => {
      e.customPreventRedirect = true;
    },
    rel: "noreferrer",
    children: [/*#__PURE__*/_jsx(Img, {
      className: "image",
      src: data.logo,
      width: 50,
      height: 50,
      alt: "",
      fallback: getProxyImageUrl(data.logo)
    }), /*#__PURE__*/_jsxs("div", {
      style: {
        flex: 1,
        marginLeft: '10px'
      },
      children: [/*#__PURE__*/_jsx("div", {
        style: mergeDarkStyle({
          marginBottom: '6px'
        }, isDark),
        children: data.title
      }), /*#__PURE__*/_jsx(Box, {
        sx: {
          maxWidth: 260,
          fontSize: 10
        },
        children: /*#__PURE__*/_jsx(DID, {
          did: data.appDID,
          showQrcode: true,
          copyable: true,
          compact: true,
          responsive: true,
          locale: locale
        })
      })]
    })]
  });
}
export default DAPPPreview;