import React from 'react';
import { DropdownProps } from '@bigbinary/neetoui';

interface Variable {
  label?: string;
  key?: string;
  value?: string;
  category?: string;
  variables?: Omit<Variable, "variables">[];
}
/**
 *
 * A common component for using dynamic variables.
 *
 * ![Screenshot](https://user-images.githubusercontent.com/70290286/223332469-21106919-637f-48b5-abec-a57306ca7005.png|height=200|width=300)
 *
 * @example 
 *
 * import DynamicVariables from "@bigbinary/neeto-molecules/DynamicVariables";
 * import { Input } from "neetoui/formik";
 * 
 * const DynamicVariablesDemo = () => {
 *   return (
 *     <Input
 *       label="Input with DynamicVariables"
 *       name="subject"
 *       suffix={
 *         <DynamicVariables
 *           dropdownProps={{ buttonStyle: "text" }}
 *           variables={EDITOR_VARIABLES}
 *           onVariableClick={variable => {
 *             console.log(variable);
 *           }}
 *         />
 *       }
 *     />
 *   );
 * };
 * @endexample
*/
declare const DynamicVariables: React.FC<{
  onVariableClick?: (variable: Variable & {
    categoryLabel?: string;
  }) => void;
  variables: Variable[];
} & DropdownProps>;

export { DynamicVariables as default };