import { X } from 'lucide-react';
import './Modal.scss'

export default function Modal({ 
  isOpen, 
  onClose, 
  title,
  children,
  onSubmit,
  submitText = 'Submit',
  submitClassName = 'submit-btn',
  showFooter = true,
  className = ''
}) {
  if (!isOpen) return null;

  return (
    <div className={`modal-overlay ${className}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          {title}
          <button className="close-btn" onClick={onClose}>
            <X />
          </button>
        </div>
        <div className="modal-body">
          {children}
        </div>
        {showFooter && (
          <div className="modal-footer">
            <button className="cancel-btn" onClick={onClose}>Cancel</button>
            <button className={submitClassName} onClick={onSubmit}>{submitText}</button>
          </div>
        )}
      </div>
    </div>
  );
}
