import styled from '@emotion/styled';
import PropTypes from 'prop-types';
import BundleAvatar from '../bundle-avatar';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
Blocklet.propTypes = {
  blocklet: PropTypes.object,
  label: PropTypes.string
};
const BlockletDiv = styled.div`
  display: flex;
  justify-items: flex-start;
  align-items: center;
  gap: 8px;
  .name {
    display: block;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;
export default function Blocklet({
  blocklet = null,
  label = ''
}) {
  return /*#__PURE__*/_jsx(BlockletDiv, {
    children: blocklet ? /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(BundleAvatar, {
        size: 24,
        blocklet: blocklet,
        ancestors: blocklet.ancestors
      }), /*#__PURE__*/_jsx("span", {
        className: "name",
        children: blocklet.title || blocklet.meta?.title
      })]
    }) : /*#__PURE__*/_jsx("span", {
      className: "name",
      children: label
    })
  });
}