import { Config } from 'driver.js';

export const getDriverConfig = (
  onNext?: (stepIndex: number) => void
): Config => ({
  showProgress: true,
  animate: true,
  smoothScroll: true,
  allowClose: true,
  overlayClickNext: false,
  stagePadding: 10,
  stageRadius: 8,
  allowKeyboardControl: true,
  disableActiveInteraction: false,

  doneBtnText: 'Crear Cuenta Gratis',
  closeBtnText: '×',
  nextBtnText: 'Siguiente →',
  prevBtnText: '← Anterior',
  progressText: 'Paso {current} de {total}',

  popoverClass: 'bakery-tour-popover',
  popoverOffset: 10,

  onHighlightStarted: (element, step, options) => {
    const currentIndex = options.state?.activeIndex || 0;

    console.log('[Driver] Highlighting element:', element);
    console.log('[Driver] Step:', step);
    console.log('[Driver] Current index:', currentIndex);

    // Track step when it's highlighted
    if (onNext && currentIndex > 0) {
      onNext(currentIndex);
    }
  },

  onHighlighted: (element, step, options) => {
    console.log('[Driver] Element highlighted successfully:', element);
  },
});
