import { TourNavigation } from '@tour-kit/react';

<TourNavigation />

<TourNavigation
  prevLabel="Back"
  nextLabel="Continue"
  completeLabel="Finish Tour"
  skipLabel="Maybe Later"
  showSkip={true}
/>

import { ChevronLeft, ChevronRight, Check } from 'lucide-react';

<TourNavigation
  prevLabel={<><ChevronLeft className="w-4 h-4" /> Back</>}
  nextLabel={<>Next <ChevronRight className="w-4 h-4" /></>}
  completeLabel={<><Check className="w-4 h-4" /> Done</>}
/>

<TourNavigation
  className="gap-4"
  prevLabel={
    <span className="px-4 py-2 border rounded-md hover:bg-gray-100">
      Previous
    </span>
  }
  nextLabel={
    <span className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
      Next
    </span>
  }
/>

// Always show previous (even on first step)
<TourNavigation hideOnFirst={false} />

// Hide next on last step (only show complete)
<TourNavigation hideOnLast={true} />

<TourNavigation showSkip={true} skipLabel="Skip Tour" />

<TourCardFooter className="flex justify-between items-center">
  <TourProgress />
  <TourNavigation />
</TourCardFooter>

import { useTour } from '@tour-kit/react';

function CustomNavigation() {
  const { next, prev, skip, complete, isFirstStep, isLastStep } = useTour('my-tour');

  return (
    <div className="flex gap-2">
      {!isFirstStep && (
        <button onClick={prev} className="btn-secondary">
          Back
        </button>
      )}
      <button onClick={skip} className="btn-ghost">
        Skip
      </button>
      {isLastStep ? (
        <button onClick={complete} className="btn-primary">
          Finish
        </button>
      ) : (
        <button onClick={next} className="btn-primary">
          Continue
        </button>
      )}
    </div>
  );
}