import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useCallback } from 'react'
import { useThemeContext } from '../../context/ThemeContext'
import './index.scss'

export default function ThemeToggle() {
  const { theme, toggleTheme } = useThemeContext()

  const handleToggle = useCallback(() => {
    // ThemeProvider 在 App.tsx 全局挂载，toggleTheme() 直接修改全局 state，
    // 不需要 eventCenter，所有页面会自动响应。
    toggleTheme()
  }, [toggleTheme])

  return (
    <View className='theme-toggle' onTap={handleToggle}>
      <Text className='theme-icon'>{theme === 'light' ? '深色' : '浅色'}</Text>
    </View>
  )
}