import React, { useEffect, useState } from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'

definePageConfig({
  navigationBarTitleText: '问题详情',
})

const HelpDetailPage: React.FC = () => {
  const router = useRouter()
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')

  useEffect(() => {
    const { title: t, content: c } = router.params
    if (t) setTitle(decodeURIComponent(t))
    if (c) setContent(decodeURIComponent(c))
  }, [router.params])

  return (
    <View className='min-h-screen bg-gray-50'>
      <ScrollView scrollY className='h-screen'>
        <View className='p-4'>
          <View className='bg-white rounded-lg p-4'>
            <Text className='text-lg font-medium text-gray-800 block mb-4'>
              {title}
            </Text>
            <View className='border-t border-gray-100 pt-4'>
              <Text className='text-sm text-gray-600 leading-7'>
                {content}
              </Text>
            </View>
          </View>

          {/* 相关问题推荐（预留） */}
          <View className='mt-4 bg-white rounded-lg p-4'>
            <Text className='text-base font-medium text-gray-800 mb-3 block'>
              相关问题
            </Text>
            <Text className='text-sm text-gray-400'>
              暂无相关问题
            </Text>
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default HelpDetailPage