import * as React from 'react'

import StackView from '../StackView'

const Scrim = React.forwardRef(function (props, ref) {
  React.useLayoutEffect(() => {
    document.body.style.overflow = 'hidden'
    return () => {
      document.body.style.overflow = ''
    }
  }, [])
  return (
    <StackView
      innerRef={ref}
      position="fixed"
      top={0}
      right={0}
      bottom={0}
      left={0}
      zIndex={10000}
      overflow="auto"
      // @ts-ignore
      backgroundColor="hsla(0,0%,0%,0.74)"
      {...props}
    />
  )
})

export { Scrim }