import React from 'react';
import { Box, Card, Typography, Avatar, Skeleton } from '@mui/material';
import PropTypes from 'prop-types';
import DidAddress from '@arcblock/ux/lib/DID';
import Img from '@arcblock/ux/lib/Img';
import { ThemeProvider } from '@arcblock/ux/lib/Theme';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function AppLogo({
  name,
  icon,
  did,
  dark = false
}) {
  return /*#__PURE__*/_jsx(ThemeProvider, {
    prefer: dark ? 'dark' : 'light',
    children: /*#__PURE__*/_jsx(Box, {
      sx: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        bgcolor: dark ? 'common.black' : 'info.main',
        pl: 4,
        borderRadius: 1,
        overflow: 'hidden',
        height: 1
      },
      children: /*#__PURE__*/_jsxs(Card, {
        sx: {
          display: 'flex',
          alignItems: 'center',
          p: 1.5,
          width: 1,
          borderRadius: '8px 0 0 8px'
        },
        children: [/*#__PURE__*/_jsx(Avatar, {
          sx: {
            bgcolor: 'transparent',
            width: 48,
            height: 48,
            borderRadius: 1
          },
          children: icon ? /*#__PURE__*/_jsx(Img, {
            src: icon,
            alt: "icon",
            style: {
              width: 48,
              height: 48,
              borderRadius: '8px'
            }
          }) : /*#__PURE__*/_jsx(Skeleton, {
            variant: "rectangular",
            width: 48,
            height: 48,
            sx: {
              borderRadius: 1
            }
          })
        }), /*#__PURE__*/_jsxs(Box, {
          sx: {
            ml: 1,
            flex: 1,
            width: 0,
            overflow: 'hidden'
          },
          children: [/*#__PURE__*/_jsx(Typography, {
            sx: {
              fontSize: 20,
              fontWeight: 500,
              color: 'text.primary',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap'
            },
            children: name
          }), /*#__PURE__*/_jsx(DidAddress, {
            did: did,
            inline: true,
            size: 13
          })]
        })]
      })
    })
  });
}
AppLogo.propTypes = {
  name: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  did: PropTypes.string.isRequired,
  dark: PropTypes.bool
};