import { useContext } from 'react';
import PropTypes from 'prop-types';
import { joinURL } from 'ufo';
import toUpper from 'lodash/toUpper';
import Tag from '@arcblock/ux/lib/Tag';
import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
import ExternalLink from '@mui/material/Link';
import Box from '@mui/material/Box';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function BlockletSource({
  sourceInfo = {},
  blocklet = {}
}) {
  const {
    t
  } = useContext(LocaleContext);
  let {
    source
  } = sourceInfo;
  if (source === 'registry') {
    source = 'Blocklet Store';
  }
  return /*#__PURE__*/_jsxs(Box, {
    sx: {
      display: 'flex',
      alignItems: 'center'
    },
    children: [/*#__PURE__*/_jsx(Tag, {
      type: "success",
      children: toUpper(source)
    }, "source"), sourceInfo.source === 'registry' && /*#__PURE__*/_jsx(ExternalLink, {
      href: joinURL(sourceInfo.deployedFrom, 'blocklets', blocklet?.meta?.bundleDid || ''),
      target: "_blank",
      className: "page-link",
      underline: "hover",
      style: {
        display: 'flex',
        alignItems: 'center',
        marginLeft: 8
      },
      children: t('blocklet.overview.viewInStore')
    })]
  });
}
BlockletSource.propTypes = {
  sourceInfo: PropTypes.shape({
    source: PropTypes.string,
    deployedFrom: PropTypes.string
  }),
  blocklet: PropTypes.object
};