// ModalShell.tsx — 通用 Modal 外壳（固定标题 + 内容区滚动）// Logan.Li
import { Button } from '@/components/ui/button';
import { X } from 'lucide-react';

export interface ModalShellProps {
  title: string;
  children: React.ReactNode;
  onClose: () => void;
  /** lg：宽弹窗；xl：镜像地址等长文本场景 // Logan.Li */
  size?: 'default' | 'lg' | 'xl';
}

export function ModalShell({ title, children, onClose, size = 'default' }: ModalShellProps) {
  const widthClass =
    size === 'xl' ? 'w-[780px]' : size === 'lg' ? 'w-[680px]' : 'w-[460px]';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
      <div
        className={`bg-slate-900 border border-slate-700 rounded-xl ${widthClass} max-w-[92vw] max-h-[85vh] flex flex-col shadow-2xl`}
        onClick={e => e.stopPropagation()}
      >
        <div className="flex items-center justify-between gap-3 px-6 pt-6 pb-4 shrink-0">
          <h2 className="text-base font-bold text-slate-100 truncate min-w-0" title={title}>{title}</h2>
          <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
        </div>
        <div className="flex-1 min-h-0 overflow-y-auto px-6 pb-6">{children}</div>
      </div>
    </div>
  );
}