/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import deprecated from '@wordpress/deprecated';
import { Button, __experimentalText as Text, __experimentalVStack as VStack } from '@wordpress/components';
import { chevronLeft, chevronRight } from '@wordpress/icons';
import { __, isRTL } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';

/**
 * Internal dependencies
 */
import BlockIcon from '../block-icon';
import { store as blockEditorStore } from '../../store';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function BlockCard({
  title,
  icon,
  description,
  blockType,
  className
}) {
  if (blockType) {
    deprecated('`blockType` property in `BlockCard component`', {
      since: '5.7',
      alternative: '`title, icon and description` properties'
    });
    ({
      title,
      icon,
      description
    } = blockType);
  }
  const {
    parentNavBlockClientId
  } = useSelect(select => {
    const {
      getSelectedBlockClientId,
      getBlockParentsByBlockName
    } = select(blockEditorStore);
    const _selectedBlockClientId = getSelectedBlockClientId();
    return {
      parentNavBlockClientId: getBlockParentsByBlockName(_selectedBlockClientId, 'core/navigation', true)[0]
    };
  }, []);
  const {
    selectBlock
  } = useDispatch(blockEditorStore);
  return /*#__PURE__*/_jsxs("div", {
    className: clsx('block-editor-block-card', className),
    children: [parentNavBlockClientId &&
    /*#__PURE__*/
    // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
    _jsx(Button, {
      onClick: () => selectBlock(parentNavBlockClientId),
      label: __('Go to parent Navigation block'),
      style:
      // TODO: This style override is also used in ToolsPanelHeader.
      // It should be supported out-of-the-box by Button.
      {
        minWidth: 24,
        padding: 0
      },
      icon: isRTL() ? chevronRight : chevronLeft,
      size: "small"
    }), /*#__PURE__*/_jsx(BlockIcon, {
      icon: icon,
      showColors: true
    }), /*#__PURE__*/_jsxs(VStack, {
      spacing: 1,
      children: [/*#__PURE__*/_jsx("h2", {
        className: "block-editor-block-card__title",
        children: title
      }), description && /*#__PURE__*/_jsx(Text, {
        className: "block-editor-block-card__description",
        children: description
      })]
    })]
  });
}
export default BlockCard;
//# sourceMappingURL=index.js.map