import { PropsWithChildren } from 'react'
import { View } from '@tarojs/components'
import './index.scss'

interface BottomSheetProps {
  visible: boolean
  onClose?: () => void
  centered?: boolean
  className?: string
}

export function BottomSheet({ visible, onClose, centered = false, className = '', children }: PropsWithChildren<BottomSheetProps>) {
  if (!visible) return null

  return (
    <View className={`bottom-sheet-bg ${centered ? 'bottom-sheet-bg--centered' : ''}`} onClick={onClose}>
      <View className={`bottom-sheet ${className}`} onClick={event => event.stopPropagation()}>
        {children}
      </View>
    </View>
  )
}

export default BottomSheet

