import React, { useEffect, useRef, useState } from "react";
import ContextMenu from "react-smart-stepper";
import "react-smart-stepper/css/index.css";

const MyComponent = () => {
  import ReactSmartStepper from 'react-smart-stepper';
  import 'react-smart-stepper/css/index.css';

  return (
      <ReactSmartStepper
        id={1}
        className="class-name-container"
        classNameGroup="class-name-group"
        classNameBottom="class-name-bottom"
        options={{
          containerWidth: 520,
          indicatorVisible: true,
          doneProcess: true,
          nextButtonEvent: (e, options) => {
            options.nextButtonProcess(options.currentStep)
            console.log('Next button clicked!');
          },
          prevButtonEvent: (e) => {
              console.log('Prev button clicked!');
          },
          submitButtonEvent: (e) => {
              console.log('Submit button clicked!');
          },
          tabButtonEvent:(e) => {
            e.currentTarget.getAttribute('data-id');
            console.log('Next button clicked!');
          }
        }}
    >
      <StepperTabs>
        <StepperHeader>
            <h6>Tab 1</h6>
        </StepperHeader>
        <StepperHeader>
            <h6>Tab 2</h6>
        </StepperHeader>
        <StepperHeader>
            <h6>Tab 3</h6>
        </StepperHeader>
        <StepperHeader>
            <h6>Tab 4</h6>
        </StepperHeader>
      </StepperTabs>
      <StepperContent>
        <StepperPane>
            Content 1
        </StepperPane>
        <StepperPane>
            Content 2
        </StepperPane>
        <StepperPane>
            Content 3
        </StepperPane>
        <StepperPane>
            Content 4
        </StepperPane>
      </StepperContent>
    </ReactSmartStepper>
  );
};
export default MyComponent;