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

interface PageShellProps {
  className?: string
  scroll?: boolean
  withTabBar?: boolean
  lowerThreshold?: number
  onScrollToLower?: () => void
}

export function PageShell({
  children,
  className = '',
  scroll = true,
  withTabBar = true,
  lowerThreshold = 80,
  onScrollToLower
}: PropsWithChildren<PageShellProps>) {
  const { safeBottom } = useSystemLayout()
  const content = (
    <View
      className={`page-shell__inner ${className}`}
      style={{ paddingBottom: withTabBar ? `${108 + safeBottom}px` : `${24 + safeBottom}px` }}
    >
      {children}
    </View>
  )

  return (
    <View className='page-shell'>
      {scroll ? (
        <ScrollView
          scrollY
          className='page-shell__scroll'
          enhanced
          showScrollbar={false}
          lowerThreshold={lowerThreshold}
          onScrollToLower={onScrollToLower}
        >
          {content}
        </ScrollView>
      ) : (
        content
      )}
    </View>
  )
}

export default PageShell