import React from 'react'

import { View } from '@tarojs/components'

import './index.less'

interface ILxSafeAreaProps {
  children?: React.ReactNode
}

/**
 * 底部安全高度，解决 iPhone 12 等新手机底部被遮挡问题
 * @constructor
 * @example
 * <LxSafeArea>安全高度</LxSafeArea>
 */
export function LxSafeArea (props: ILxSafeAreaProps) {
  const { children } = props

  return (
    <View className='lx-safe-area'>
      { children }
      <View className='lx-safe-area__bottom'></View>
    </View>
  )
}

export default LxSafeArea