import type { Options, Styles } from 'react-joyride';

export function getTutorialStyles(theme: 'light' | 'dark'): {
  options: Partial<Options>;
  styles: Partial<Styles>;
} {
  const isDark = theme === 'dark';

  return {
    options: {
      arrowColor: isDark ? '#292524' : '#ffffff',
      backgroundColor: isDark ? '#292524' : '#ffffff',
      disableFocusTrap: true,
      hideOverlay: true,
      overlayColor: isDark ? 'rgba(10,14,26,0.75)' : 'rgba(0,0,0,0.5)',
      primaryColor: '#00a28c',
      spotlightRadius: 8,
      textColor: isDark ? '#d6d3d1' : '#44403c',
      zIndex: 1000,
    },
    styles: {
      tooltip: {
        borderRadius: 8,
        padding: 16,
      },
      tooltipTitle: {
        color: isDark ? '#f5f5f4' : '#0a0e1a',
        fontSize: 15,
        fontWeight: 600,
      },
      tooltipContent: {
        fontSize: 13,
        lineHeight: 1.5,
        padding: '8px 0 0',
      },
      buttonPrimary: {
        borderRadius: 6,
        fontSize: 13,
        fontWeight: 500,
        padding: '6px 14px',
      },
      buttonBack: {
        color: isDark ? '#a8a29e' : '#78716c',
        fontSize: 13,
        fontWeight: 500,
        marginRight: 8,
      },
      buttonSkip: {
        color: isDark ? '#78716c' : '#a8a29e',
        fontSize: 12,
      },
      buttonClose: {
        color: isDark ? '#a8a29e' : '#78716c',
      },
    },
  };
}