import React from 'react';

interface OnboardingComponent {
  key: string;
  element: React.ReactNode;
  label: string;
}
/**
 *
 * The Onboarding component facilitates a smooth onboarding flow. It comprises
 *
 * three primary screens:
 *
 * Additionally, you can enhance the onboarding experience by passing custom
 *
 * components using the onboardingSteps prop. These custom components will be
 *
 * rendered between the WelcomeScreen and HelpScreen, allowing for a more
 *
 * customized onboarding process.
 *
 * @example 
 *
 * import Onboarding from "@bigbinary/neeto-molecules/Onboarding";
 * 
 * const Onboarding = () => {
 *   const [currentStep, setCurrentStep] = useState(0);
 * 
 *   const CustomComponent = () => {
 *     return (
 *       <div>
 *         <h1>Custom Component</h1>
 *       </div>
 *     );
 *   };
 * 
 *   return (
 *     <>
 *       <Onboarding
 *         currentStep={currentStep}
 *         setCurrentStep={setCurrentStep}
 *         completeButtonProps={{
 *           onClick: () => {
 *             console.log("Onboarding completed");
 *           },
 *         }}
 *         onboardingSteps={[
 *           {
 *             key: "custom-component",
 *             label: "Custom Component",
 *             element: <CustomComponent />,
 *           },
 *         ]}
 *       />
 *     </>
 *   );
 * };
 * @endexample
*/
declare const Onboarding: React.FC<{
  currentStep: string;
  completeButtonProps: Object;
  setCurrentStep: React.Dispatch<React.SetStateAction<string>>;
  onboardingSteps?: OnboardingComponent[];
  helpScreenClassName?: string;
  welcomeScreenClassName?: string;
  completedScreenClassName?: string;
  completedScreenSuccessMessage?: React.ReactNode;
  isAnimated?: boolean;
  disableStepClick?: boolean;
}>;

export { Onboarding as default };