import { createTour } from '@oppla-ai/tours';

const tour = createTour({
  id: 'feature-tour',
  steps: [
    {
      type: 'tooltip',
      target: '#feature-button',
      content: 'Try our new feature!'
    }
  ],
  analytics: {
    trackViews: true,
    trackInteractions: true
  }
});

tour.start();

{
  type: 'tooltip',
  target: '#feature-button',
  content: 'Try our new feature!',
  analytics: {
    trackEvent: 'feature_tooltip_shown',
    properties: {
      feature_name: 'new-feature',
      step_index: 0
    }
  }
}

{
  type: 'tooltip',
  target: '#feature-button',
  content: 'Try our new feature!',
  onShow: () => {
    window.oppla.track('tooltip_shown', {
      tour_id: 'feature-tour',
      step_index: 0
    });
  },
  onClick: () => {
    window.oppla.track('tooltip_clicked', {
      tour_id: 'feature-tour',
      step_index: 0
    });
  }
}

{
  type: 'tooltip',
  target: '#feature-button',
  content: 'Try our new feature!',
  onComplete: () => {
    window.oppla.track('tour_step_completed', {
      tour_id: 'feature-tour',
      step_index: 0,
      time_spent: 5000 // milliseconds
    });
  }
}