import React, { useState } from "react";
import Tour, { Step, Steps } from "react-light-tour";
 
const App = () => {
  const [isTourRunning, setIsTourRunning] = useState(true);
 
  const steps: Steps = [
    { selector: "#step1", content: "This is the first step" },
    { selector: "#step2", content: "This is the second step" },
    { selector: "#step3", content: "This is the third step" },
  ];
 
  return (
    <div>
      <button onClick={() => setIsTourRunning(true)}>Start Tour</button>
      <Tour
        isRun={isTourRunning}
        steps={steps}
        nextText="Next Step"
        previewText="Previous Step"
        doneText="Finish Tour"
      />
      <div id="step1">Step 1</div>
      <div id="step2">Step 2</div>
      <div id="step3">Step 3</div>
    </div>
  );
};
 
export default App;