import type { ReactNode } from "react";
import { X } from "lucide-react";
import { Button } from "./Button";

// Dialog 轻量模态：遮罩 + 居中卡片。open=false 不渲染。
export function Dialog({
  open,
  onClose,
  title,
  children,
  footer,
}: {
  open: boolean;
  onClose: () => void;
  title: string;
  children: ReactNode;
  footer?: ReactNode;
}) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-6" onClick={onClose}>
      <div
        className="w-full max-w-md rounded-lg border border-line bg-ink-900 shadow-card"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center border-b border-line px-4 py-3">
          <h3 className="text-sm font-medium text-slate-100">{title}</h3>
          <button onClick={onClose} className="ml-auto text-slate-500 hover:text-slate-300">
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="px-4 py-4 text-sm text-slate-300">{children}</div>
        {footer && <div className="flex justify-end gap-2 border-t border-line px-4 py-3">{footer}</div>}
      </div>
    </div>
  );
}

// ConfirmFooter 常用的取消/确认按钮组。
export function ConfirmFooter({ onCancel, onConfirm, confirmLabel = "确认", danger }: { onCancel: () => void; onConfirm: () => void; confirmLabel?: string; danger?: boolean }) {
  return (
    <>
      <Button variant="ghost" size="sm" onClick={onCancel}>
        取消
      </Button>
      <Button variant={danger ? "danger" : "primary"} size="sm" onClick={onConfirm}>
        {confirmLabel}
      </Button>
    </>
  );
}