import React from "react";
import Modal from "react-bootstrap/Modal";
import { X } from "react-feather";

type AppModalProps = {
    isOpen: boolean;
    onClose: () => void;
    children: React.ReactNode;
    title?: string;
    className?: string;
    contentClassName?: string;
    bodyClassName?: string;
    isCloseDisabled?: boolean;
    size?: "sm" | "lg" | "xl";
};

type AppModalHeaderProps = {
    title: string;
    onClose: () => void;
    isCloseDisabled?: boolean;
    className?: string;
    titleClassName?: string;
};

export const AppModalHeader: React.FC<AppModalHeaderProps> = ({
    title,
    onClose,
    isCloseDisabled = false,
    className = "modal-name mb-3 d-flex justify-content-between align-items-center",
    titleClassName = "text-lg fw-600 m-0",
}) => {
    return (
        <div className={className}>
            <h4 className={titleClassName}>{title}</h4>
            <button
                type="button"
                className="btn-close opacity-50 d-flex align-items-center justify-content-center p-0"
                aria-label="Close"
                onClick={onClose}
                disabled={isCloseDisabled}
            >
                <X/>
            </button>

        </div>
    );
};

const AppModal: React.FC<AppModalProps> = ({
    isOpen,
    onClose,
    children,
    title,
    className = "my-modal",
    contentClassName = "rounded-4",
    bodyClassName,
    isCloseDisabled = false,
    size,
}) => {
    return (
        <Modal
            show={isOpen}
            onHide={() => {
                if (!isCloseDisabled) onClose();
            }}
            centered
            className={className}
            contentClassName={contentClassName}
            backdrop
            keyboard={!isCloseDisabled}
            animation
            size={size}
        >
            <Modal.Body className={bodyClassName}>
                    <div className="modal-name d-flex align-items-start">
                        <h4 className="text-lg fw-600 m-0 me-auto">{title}</h4>
                        <button
                            type="button"
                            className="btn-close opacity-50 d-flex align-items-center justify-content-center p-0 ms-auto"
                            aria-label="Close"
                            onClick={onClose}
                            disabled={isCloseDisabled}
                        >
                            <X />
                        </button>
                    </div>
                {children}
            </Modal.Body>
        </Modal>
    );
};

export default AppModal;