import React from 'react';
import { Modal } from 'react-bootstrap';
import { X, Check } from 'lucide-react';

interface BaseEditModalProps {
    show: boolean;
    onHide: () => void;
    title: string;
    subtitle?: string;
    icon?: React.ReactNode;
    iconVariant?: 'primary' | 'indigo' | 'emerald' | 'rose';
    submitLabel?: string;
    loading?: boolean;
    children: React.ReactNode;
    onSubmit: (e: React.FormEvent) => void;
    dialogClassName?: string;
}

const BaseEditModal: React.FC<BaseEditModalProps> = ({
    show,
    onHide,
    title,
    subtitle,
    icon,
    iconVariant = 'primary',
    submitLabel = 'Guardar',
    loading = false,
    children,
    onSubmit,
    dialogClassName = 'saas-modal-dialog-sm',
}) => {
    return (
        <Modal
            show={show}
            onHide={onHide}
            centered
            backdrop="static"
            dialogClassName={dialogClassName}
            contentClassName="saas-modal-content"
        >
            <div className="saas-modal-header">
                <div className="d-flex align-items-center gap-2">
                    {icon && (
                        <div className={`saas-icon-badge ${iconVariant}`}>
                            {icon}
                        </div>
                    )}
                    <div>
                        <div className="saas-modal-title">{title}</div>
                        {subtitle && <span className="saas-modal-subtitle">{subtitle}</span>}
                    </div>
                </div>
                <button
                    type="button"
                    className="saas-modal-close-btn"
                    onClick={onHide}
                    title="Cerrar modal"
                    aria-label="Cerrar modal"
                >
                    <X size={16} />
                </button>
            </div>
            <form onSubmit={onSubmit} autoComplete="off">
                <Modal.Body className="saas-modal-body">{children}</Modal.Body>
                <div className="saas-modal-footer">
                    <button
                        type="button"
                        className="saas-btn-outline"
                        onClick={onHide}
                        disabled={loading}
                    >
                        Cancelar
                    </button>
                    <button
                        type="submit"
                        className="saas-btn-primary"
                        disabled={loading}
                    >
                        {loading ? (
                            <span>Guardando...</span>
                        ) : (
                            <>
                                <Check size={14} />
                                <span>{submitLabel}</span>
                            </>
                        )}
                    </button>
                </div>
            </form>
        </Modal>
    );
};

export default BaseEditModal;