/* eslint-disable */
// Modal — bottom sheet on mobile, centered on desktop

const Modal = ({ title, children, onClose, onSubmit, submitLabel = "Save" }) => (
  <div
    onClick={onClose}
    className="fixed inset-0 bg-black bg-opacity-50 flex items-end sm:items-center justify-center z-50 animate-fade-in"
  >
    <div
      onClick={(e) => e.stopPropagation()}
      className="bg-white dark:bg-gray-800 rounded-t-2xl sm:rounded-lg shadow-xl max-w-md w-full sm:mx-4 max-h-[90vh] flex flex-col"
    >
      <div className="border-b border-gray-200 dark:border-gray-700 p-6 shrink-0">
        <h2 className="text-xl font-bold text-gray-900 dark:text-white">{title}</h2>
      </div>
      <div className="p-6 overflow-y-auto">
        {children}
      </div>
      <div className="border-t border-gray-200 dark:border-gray-700 p-6 flex gap-3 justify-end shrink-0">
        <BtnSecondary onClick={onClose}>Cancel</BtnSecondary>
        {onSubmit && <BtnPrimary onClick={onSubmit}>{submitLabel}</BtnPrimary>}
      </div>
    </div>
  </div>
);

window.Modal = Modal;