import React from 'react'

import Button from '../Button/Button'

type BackgroundOverlayProps = {
  /** Close the background overlay */
  close: () => void
  /** Optionally override the styles if needed */
  style?: React.CSSProperties
  /** Boolean used to determine when to start fadeIn / fadeOut animations */
  isTransitioning: boolean
}

/**
 * BackgroundOverlay component for internal library use only.
 * This component is not exported via the module.ts file and should not be used outside of the component library.
 */
const BackgroundOverlay = ({
  close,
  style = {},
  isTransitioning,
}: BackgroundOverlayProps): React.JSX.Element => {
  const closeCallout = () => {
    close()
  }

  return (
    <Button as='unstyled' onClick={closeCallout}>
      <div
        className={`animated fixed inset-0 bg-black/25 ${isTransitioning ? 'fadeOut' : 'fadeIn'}`}
        // Setting the animation duration to 0.25s. Tailwind CSS doesn't support animation duration.
        style={{ animationDuration: '0.25s', ...style }}
      />
    </Button>
  )
}

export default BackgroundOverlay