import React from 'react';

type BlockProps = {
  title?: React.ReactNode;
  actionBlock?: React.ReactNode;
  className?: string;
};
interface BlockComposition {
  Block: React.FC<BlockProps>;
  DetailsBlock: React.FC<BlockProps & {
    details: Array<{
      label?: React.ReactNode;
      value?: React.ReactNode;
      type?: string;
    }>;
    style?: "inline" | "multiline";
    truncate?: Boolean;
    truncateAt?: number;
  }>;
}
/**
 *
 * This is a wrapper for displaying metadata information about an entity. It can
 *
 * have a header block and multiple card blocks inside it.
 *
 * ![image](https://user-images.githubusercontent.com/35304653/276496457-9bb7fbbd-2a28-43af-b32b-67e8f1b4fe24.png|height=200|width=300)
 *
 * @example 
 *
 * import Metadata from "@bigbinary/neeto-molecules/Metadata";
 * 
 * const MetadataComponent = () => (
 *   <Metadata headerBlock={<Header />}>
 *     <Metadata.Block>Custom content</Metadata.Block>
 *   </Metadata>
 * );
 * @endexample
 * A block component that can be rendered inside the Metadata wrapper component.
 *
 * ![image](https://user-images.githubusercontent.com/35304653/276496694-2a2edd90-d023-4838-bcbc-8a6bf3c7c51b.png|height=200|width=300)
 *
 * @example 
 *
 * const ActionBlock = ({ onAdd, onEdit }) => (
 *   <MoreDropdown
 *     menuItems={[
 *       {
 *         label: "Add",
 *         onClick: onAdd,
 *       },
 *       {
 *         label: "Edit",
 *         onClick: onEdit,
 *       },
 *     ]}
 *   />
 * );
 * 
 * const MetadataComponent = () => (
 *   <Metadata>
 *     <Metadata.Block actionBlock={<ActionBlock />} title="Tags">
 *       Custom content
 *     </Metadata.Block>
 *   </Metadata>
 * );
 * @endexample
 * A custom block component built on top of Metadata.Block. It can be used to
 *
 * display some details as label-value pairs. It has a few options for rendering
 *
 * label and value inline or multiline. It also has the option to set a view more
 *
 * button to hide certain fields.
 *
 * ![image](https://user-images.githubusercontent.com/35304653/276496874-ae846576-b892-40ee-84bf-df2abaa87f14.png|height=200|width=300)
 *
 * @example 
 *
 * const MetadataComponent = () => (
 *   const detailsToTruncate = [
 *   { label: "Name", value: "Oliver" },
 *   { label: "Phone", value: "1234567890" },
 *   { label: "Email", value: "oliver@example.com" },
 *   { label: "Custom", value: <Input /> },
 *   ];
 * 
 *   const detailsWithDivider = [
 *   { label: "Name", value: "Oliver" },
 *   { label: "Phone", value: "1234567890" },
 *   { type: "divider" },
 *   { label: "Email", value: "oliver@example.com" },
 *   { label: "Custom", value: <Input /> },
 * ];
 * 
 *   <Metadata>
 *     <Metadata.DetailsBlock truncate details={detailsToTruncate} truncateAt={2} />
 *     <Metadata.DetailsBlock details={detailsWithDivider} />
 *   </Metadata>
 * );
 * @endexample
*/
declare const Metadata: React.FC<{
  className?: string;
  headerBlock?: React.ReactNode;
  size?: "small" | "medium";
}> & BlockComposition;

export { Metadata as default };