import React from 'react';
import { Modal } from 'react-bootstrap';
import Button from 'react-bootstrap/Button';

export interface PluginModalProps {
    title?: React.ReactElement;
    show: boolean;
    onSave?: () => void;
    onCancel?: () => void;
    hideFooter?: boolean;
    buttonLabel?: string;
    centered?: boolean;
}

export const FormModal: React.FC<PluginModalProps> = ({
    title,
    show,
    onSave,
    onCancel,
    hideFooter,
    buttonLabel,
    children,
    centered,
}) => {
    return (
        <Modal show={show} onHide={onCancel} enforceFocus={false} restoreFocus={false} centered={centered}>
            {title && (
                <Modal.Header>
                    <Modal.Title>{title}</Modal.Title>
                </Modal.Header>
            )}
            <Modal.Body>{children}</Modal.Body>
            {!hideFooter && (
                <Modal.Footer>
                    <Button variant="secondary" onClick={onCancel}>
                        Close
                    </Button>
                    {onSave && (
                        <Button variant="success" onClick={onSave}>
                            {buttonLabel || 'Save'}
                        </Button>
                    )}
                </Modal.Footer>
            )}
        </Modal>
    );
};
