import { ReactNode } from "react";

interface Props {
  title: string;
  onClose: () => void;
  children: ReactNode;
  size?: "sm" | "md" | "lg";
  /** 固定高度模式：传入后模态框高度固定，内容区滚动 */
  fixedHeight?: string;
}

const SIZE = { sm: "max-w-sm", md: "max-w-lg", lg: "max-w-2xl" };

export function Dialog({ title, onClose, children, size = "md", fixedHeight }: Props) {
  return (
    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/40">
      <div
        className={`bg-white rounded-xl shadow-2xl w-full mx-4 ${SIZE[size]} flex flex-col`}
        style={fixedHeight ? { height: fixedHeight } : { maxHeight: "90vh" }}
      >
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 shrink-0">
          <h2 className="text-base font-semibold text-gray-900">{title}</h2>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 text-xl leading-none"
          >
            ×
          </button>
        </div>
        <div className="flex flex-col flex-1 min-h-0">{children}</div>
      </div>
    </div>
  );
}
