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

interface BaseEditModalProps {
    show: boolean;
    onHide: () => void;
    title: string;
    submitLabel?: string;
    loading?: boolean;
    children: React.ReactNode;
    onSubmit: (e: React.FormEvent) => void;
}

const BaseEditModal: React.FC<BaseEditModalProps> = ({
    show,
    onHide,
    title,
    submitLabel = 'Guardar',
    loading = false,
    children,
    onSubmit,
}) => {
    return (
        <Modal show={show} onHide={onHide} centered backdrop="static" dialogClassName="dashboard-modal">
            <Modal.Header closeButton>
                <Modal.Title>{title}</Modal.Title>
            </Modal.Header>
            <form onSubmit={onSubmit}>
                <Modal.Body>{children}</Modal.Body>
                <Modal.Footer>
                    <Button variant="outline-secondary" onClick={onHide} disabled={loading}>
                        Cancelar
                    </Button>
                    <Button type="submit" variant="primary" disabled={loading}>
                        {loading ? <Spinner size="sm" animation="border" /> : submitLabel}
                    </Button>
                </Modal.Footer>
            </form>
        </Modal>
    );
};

export default BaseEditModal;