import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useMemo } from 'react'
import styles from './index.module.scss'

interface Props {
  title: string
  fixed?: boolean
  autoBack?: boolean       // 默认 true（修复 uni-app up-navbar 坑）
  border?: boolean         // 默认 false
  safeAreaTop?: boolean    // 默认 true
  variant?: 'default' | 'hero'   // hero 为绿色渐变头部，default 为白底黑字
  onBack?: () => void
}

export function Navbar({
  title,
  fixed = false,
  autoBack = true,
  border = false,
  safeAreaTop = true,
  variant = 'default',
  onBack
}: Props) {
  // getSystemInfoSync 已废弃，改用 getWindowInfo
  const statusBarHeight = useMemo(() => Taro.getWindowInfo().statusBarHeight ?? 20, [])

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

  return (
    <View
      className={`${styles.navbar} ${variant === 'hero' ? styles.navbarHero : ''}`}
      style={{
        paddingTop: safeAreaTop ? `${statusBarHeight}px` : 0,
        position: fixed ? 'fixed' : 'relative',
        borderBottom: border ? '1px solid #f0f1f3' : 'none'
      }}
    >
      <View className={styles.bar}>
        {autoBack && (
          <View className={styles.back} onClick={handleBack}>
            <View className={styles.backArrow} />
          </View>
        )}
        <View className={styles.titleWrap}>
          <Text className={`${styles.title} ${variant === 'hero' ? styles.titleHero : ''}`}>{title}</Text>
        </View>
      </View>
    </View>
  )
}