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

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

  return {
    options: {
      arrowColor: isDark ? '#292524' : '#ffffff',
      backgroundColor: isDark ? '#292524' : '#ffffff',
      overlayColor: isDark ? 'rgba(10,14,26,0.75)' : 'rgba(0,0,0,0.5)',
      primaryColor: '#00a28c',
      textColor: isDark ? '#d6d3d1' : '#44403c',
      zIndex: 1000,
    },
    tooltip: {
      borderRadius: 8,
      padding: 16,
    },
    tooltipTitle: {
      color: isDark ? '#f5f5f4' : '#0a0e1a',
      fontSize: 15,
      fontWeight: 600,
    },
    tooltipContent: {
      fontSize: 13,
      lineHeight: 1.5,
      padding: '8px 0 0',
    },
    buttonNext: {
      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',
    },
    spotlight: {
      borderRadius: 8,
    },
  };
}