import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'

interface NavigationBarProps {
  title?: string
  showBack?: boolean
  showMore?: boolean
  onBack?: () => void
  onMore?: () => void
}

function NavigationBar({
  title = '分销中心',
  showBack = true,
  showMore = true,
  onBack,
  onMore
}: NavigationBarProps) {

  const handleBack = () => {
    if (onBack) {
      onBack()
    } else {
      Taro.navigateBack()
    }
  }

  const handleMore = () => {
    if (onMore) {
      onMore()
    } else {
      Taro.showActionSheet({
        itemList: ['分享', '设置', '帮助']
      })
    }
  }

  return (
    <View className="relative">
      {/* 状态栏占位 */}
      <View style={{ height: Taro.getSystemInfoSync().statusBarHeight + 'px' }} />

      {/* 导航栏 */}
      <View className="flex items-center justify-between px-4 py-3 relative z-10">
        {/* 左侧返回按钮 */}
        <View className="w-8 h-8 flex items-center justify-center">
          {showBack && (
            <View
              className="w-6 h-6 flex items-center justify-center cursor-pointer"
              onClick={handleBack}
            >
              <View className="text-white text-lg">‹</View>
            </View>
          )}
        </View>

        {/* 中间标题 */}
        <View className="flex-1 text-center">
          <View className="text-white text-xl font-medium">{title}</View>
        </View>

        {/* 右侧更多按钮 */}
        <View className="w-8 h-8 flex items-center justify-center">
          {showMore && (
            <View
              className="w-6 h-6 flex items-center justify-center cursor-pointer"
              onClick={handleMore}
            >
              <View className="text-white text-lg">⋯</View>
            </View>
          )}
        </View>
      </View>
    </View>
  )
}

export default NavigationBar