import React, { memo } from 'react'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

import { getDefaultValue } from '../helpers'

import type { PopupPageProps } from './interface'
import Popup from './popup'

const PopupPage: React.FC<PopupPageProps> = ({
  safeAreaInsetTop,
  style,
  ...restProps
}) => {
  const insets = useSafeAreaInsets()

  const _safeAreaInsetTop = getDefaultValue(safeAreaInsetTop, insets.top)

  return (
    <Popup
      {...restProps}
      style={[{ top: _safeAreaInsetTop }, style]}
      position="bottom"
    />
  )
}

export default memo(PopupPage)