Modal.tsx

import React, { ReactNode } from 'react'
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?: string
}

const Modal: React.FC<ModalProps> = ({
  open,
  border,
  handleCloseClick,
  children,
  yellowBorder,
}: ModalProps) => {
  const yellow = yellowBorder ? yellowBorder : ''
  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={handleCloseClick}
        />
        <div className="modal-content">{children}</div>
      </div>
    </div>
  )
}

export default Modal