import { ReactNode } from 'react'
import { Text, View } from '@tarojs/components'
import { useSystemLayout } from '@/hooks/useSystemLayout'
import './index.scss'

interface CustomNavBarProps {
  title?: string
  compactTitle?: boolean
  left?: ReactNode
  leading?: ReactNode
}

export function CustomNavBar({ title, compactTitle = false, left, leading }: CustomNavBarProps) {
  const { statusBarHeight, menuRight } = useSystemLayout()
  const leadingContent = leading || left

  return (
    <View className='custom-nav' style={{ paddingTop: `${statusBarHeight}px`, paddingRight: `${menuRight}px` }}>
      <View className='custom-nav__row'>
        {leadingContent ? <View className='custom-nav__leading'>{leadingContent}</View> : <View className='custom-nav__left' />}
        {title ? <Text className={`custom-nav__title ${compactTitle ? 'custom-nav__title--compact' : ''}`}>{title}</Text> : null}
      </View>
    </View>
  )
}

export default CustomNavBar
