import { useMemo } from 'react';
import PropTypes from 'prop-types';
import uniq from 'lodash/uniq';
import upperFirst from 'lodash/upperFirst';
import Box from '@mui/material/Box';
import Tag from '@arcblock/ux/lib/Tag';
import { jsx as _jsx } from "react/jsx-runtime";
export default function ResourceType({
  blocklet,
  ...rest
}) {
  const types = useMemo(() => {
    return uniq((blocklet?.meta?.resources || []).map(x => upperFirst(x.split('.').slice(-1)[0])).filter(Boolean));
  }, [blocklet]);
  const style = {
    color: '#FFF',
    backgroundColor: '#5B9BD5',
    marginRight: '4px'
  };
  return /*#__PURE__*/_jsx(Box, {
    ...rest,
    sx: [{
      display: 'flex',
      mr: '-4px'
    }, ...(Array.isArray(rest.sx) ? rest.sx : [rest.sx])],
    children: types.map(x => /*#__PURE__*/_jsx(Tag, {
      type: "custom",
      style: style,
      children: x
    }, x))
  });
}
ResourceType.propTypes = {
  blocklet: PropTypes.object.isRequired
};