'use client';

import {
  Tour,
  TourStep,
  TourCard,
  TourCardHeader,
  TourCardContent,
  TourCardFooter,
  TourOverlay,
  TourProgress,
  TourNavigation,
  TourClose,
  useTour,
} from '@tour-kit/react';

export default function BasicTourExample() {
  return (
    <Tour id="basic-tour">
      {/* Define your steps */}
      <TourStep
        target="#welcome-header"
        title="Welcome!"
        content="This is your dashboard. Let's take a quick tour of the key features."
        placement="bottom"
      />

      <TourStep
        target="#sidebar-nav"
        title="Navigation"
        content="Use the sidebar to navigate between different sections of the app."
        placement="right"
      />

      <TourStep
        target="#create-button"
        title="Create New"
        content="Click here to create a new project. You can choose from templates or start from scratch."
        placement="bottom-start"
      />

      {/* Spotlight overlay */}
      <TourOverlay />

      {/* Tour card UI */}
      <TourCard className="w-80">
        <TourCardHeader>
          <TourClose />
        </TourCardHeader>
        <TourCardContent />
        <TourCardFooter>
          <TourProgress variant="dots" />
          <TourNavigation />
        </TourCardFooter>
      </TourCard>

      {/* Your app content */}
      <AppContent />

      {/* Button to start the tour */}
      <StartTourButton />
    </Tour>
  );
}

function AppContent() {
  return (
    <div className="p-8">
      <header id="welcome-header" className="mb-8">
        <h1 className="text-3xl font-bold">Dashboard</h1>
        <p className="text-muted-foreground">Welcome to your workspace</p>
      </header>

      <div className="flex gap-8">
        <nav id="sidebar-nav" className="w-48 p-4 border rounded-lg">
          <ul className="space-y-2">
            <li><a href="#" className="hover:underline">Home</a></li>
            <li><a href="#" className="hover:underline">Projects</a></li>
            <li><a href="#" className="hover:underline">Settings</a></li>
          </ul>
        </nav>

        <main className="flex-1">
          <button
            id="create-button"
            className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
          >
            Create New Project
          </button>
        </main>
      </div>
    </div>
  );
}

function StartTourButton() {
  const { start, isActive } = useTour();

  if (isActive) return null;

  return (
    <button
      onClick={() => start()}
      className="fixed bottom-4 right-4 px-4 py-2 bg-primary text-primary-foreground rounded-lg shadow-lg"
    >
      Start Tour
    </button>
  );
}

'use client';

import {
  Tour,
  TourStep,
  TourCard,
  TourOverlay,
  useTour,
} from '@tour-kit/react';

export default function MinimalTour() {
  return (
    <Tour id="minimal-tour">
      <TourStep target="#feature-1" title="Feature One" content="Description here" />
      <TourStep target="#feature-2" title="Feature Two" content="Description here" />

      <TourOverlay />
      <TourCard />

      <App />
    </Tour>
  );
}

function App() {
  const { start, isActive } = useTour();

  return (
    <div className="p-8 space-y-4">
      <div id="feature-1" className="p-4 border">Feature 1</div>
      <div id="feature-2" className="p-4 border">Feature 2</div>

      {!isActive && (
        <button onClick={() => start()} className="px-4 py-2 bg-blue-500 text-white rounded">
          Start Tour
        </button>
      )}
    </div>
  );
}