Modal.tsx

import React, { useEffect, useContext, ReactNode } from 'react'
import { AppContext } from 'components/Contexts/AppContextProvider'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import CloseIcon from 'assets/icons/ico/close.svg'

interface ModalProps {
  open: boolean
  border?: boolean
  handleCloseClick: () => void
  children: ReactNode
  yellowBorder?: boolean
}

const Modal: React.FC<ModalProps> = ({
  open,
  border,
  handleCloseClick,
  children,
  yellowBorder,
}: ModalProps) => {
  const yellow = yellowBorder ? 'yellow-border' : ''
  const { disableBackgroundScroll } = useContext(AppContext)

  useEffect(() => {
    open ? disableBackgroundScroll(true) : disableBackgroundScroll(false)
    return () => {
      disableBackgroundScroll(false)
    }
  }, [open])

  const closeClick = () => {
    disableBackgroundScroll(false)
    handleCloseClick()
  }

  return (
    <div className={`modal-overlay ${open ? 'modal-opened' : ''}`}>
      <div
        className={`modal-box ${border ? 'modal-box-bordered' : ''} ${yellow}`}
      >
        <StyledIconButton
          className="modal-close-button"
          icon={CloseIcon}
          onClick={closeClick}
        />
        <div className="modal-content">{children}</div>
      </div>
    </div>
  )
}

export default Modal