import { computed } from 'vue'
import { useThemeStore } from '@/stores/theme'

/**
 * Shared composable for theme switching.
 *
 * Returns themeClass ('theme-dark' | 'theme-light') for class-based theming.
 * This is more reliable than CSS custom property cascade in mini-programs.
 *
 * Usage:
 *   <view class="page-xxx" :class="themeClass">
 *   const { themeClass } = useTheme()
 */
export function useTheme() {
  const themeStore = useThemeStore()

  const themeClass = computed(() =>
    themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'
  )

  return { themeClass, themeStore }
}

// Alias for backward compat
export const useThemeStyle = useTheme