import { TourTrigger } from "@/components/tour-torch"

const tourSteps = [
  {
    id: "welcome",
    title: "Welcome to TourTorch!",
    content: "Let's take a guided tour of your application's key features.",
    target: "#main-content",
    placement: "bottom"
  },
  {
    id: "navigation",
    title: "Navigation Menu",
    content: "Use this navigation menu to access different sections.",
    target: "#nav-menu",
    placement: "right"
  }
]

export default function MyPage() {
  return (
    <div>
      <TourTrigger steps={tourSteps}>
        Start Tour
      </TourTrigger>
      
      <main id="main-content">
        <nav id="nav-menu">
          {/* Your content */}
        </nav>
      </main>
    </div>
  )
}

import { useTour } from "@/components/tour-torch"

function MyComponent() {
  const { 
    startTour, 
    nextStep, 
    prevStep, 
    skipTour, 
    endTour,
    isActive,
    currentStep 
  } = useTour()

  const handleCustomTour = () => {
    startTour(customSteps)
  }

  return (
    <div>
      <button onClick={handleCustomTour}>
        Start Custom Tour
      </button>
      
      {isActive && (
        <div>Current step: {currentStep + 1}</div>
      )}
    </div>
  )
}