export interface AdminModalProps {
  id: string;
  title: any;
  children: any;
  maxWidth?: string;
  onClose?: string; // e.g. "closeModal('myModalId')"
}

export const AdminModal = ({
  id,
  title,
  children,
  maxWidth = "550px",
  onClose,
}: AdminModalProps) => {
  return (
    <div
      id={id}
      style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
    >
      <div
        style={`background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: ${maxWidth}; padding: 1.5rem; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;`}
      >
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
          <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
            {title}
          </h3>
          <button
            type="button"
            onclick={onClose}
            style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
          >
            &times;
          </button>
        </div>
        {children}
      </div>
    </div>
  );
};