import React from 'react';
import { ButtonProps, PopoverProps } from '@bigbinary/neetoui';

interface HelpPopoverProps {
  title?: string;
  description?: React.ReactNode;
  helpLinkProps?: ButtonProps;
  popoverProps?: PopoverProps;
  size?: "default" | "large";
  className?: string;
  icon?: React.ReactNode;
  iconColor?: string;
}
/**
 *
 * Can be used to show contextual help information within a popover when a user
 *
 * hovers on the help icon. This component can be used to provide guidance,
 *
 * instructions, or additional context without cluttering the main interface. We
 *
 * can also direct the user to a separate page for more information.
 *
 * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/12969853/b5a8695a-9017-4a89-a138-425b0ef71835|height=200|width=300)
 *
 * @example 
 *
 * import HelpPopover from "@bigbinary/neeto-molecules/HelpPopover";
 * const App = () => {
 *   return (
 *     <div>
 *       <HelpPopover
 *         title="What is KB keywords?"
 *         description="Keywords represent the key concepts of an article. These will be
 *             shown on the KB and will be used for SEO"
 *         helpLinkProps={{ label: "KB", href: "https://google.com/kb" }}
 *       />
 *     </div>
 *   );
 * };
 * @endexample
*/
declare const HelpPopover: React.FC<HelpPopoverProps>;

export { HelpPopover as default };
export type { HelpPopoverProps };