import { faXmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import clsx from 'clsx';
import { ReactNode } from 'react';
import { Modal } from 'react-bootstrap';
import styles from './index.module.scss';

interface CustomModalProps {
  show?: boolean;
  handleClose?: () => void;
  children?: ReactNode;
  size?: 'sm' | 'lg' | 'xl' | undefined;
  isCloseBtn?: boolean;
  className?: string;
}

const CustomModal = ({
  show,
  className,
  handleClose,
  size,
  children,
  isCloseBtn,
}: CustomModalProps) => {
  return (
    <>
      <Modal
        show={show}
        className={className}
        size={size}
        onHide={handleClose}
        centered
      >
        <Modal.Header className="position-relative border-b-0">
          {isCloseBtn && (
            <div
              className={`${styles.modalCloseBtn} rounded-circle d-flex justify-content-center align-items-center position-absolute`}
              onClick={handleClose}
            >
              <FontAwesomeIcon icon={faXmark} className="text-white" />
            </div>
          )}
        </Modal.Header>
        <Modal.Body className={clsx(styles.customModal, 'position-relative')}>
          {children}
        </Modal.Body>
      </Modal>
    </>
  );
};

export default CustomModal;