import type { ReactNode } from "react";

interface WorkbenchDialogProps {
  id?: string;
  title: string;
  children: ReactNode;
  onClose: () => void;
}

export function WorkbenchDialog({ id, title, children, onClose }: WorkbenchDialogProps) {
  return (
    <div className="workbench-dialog-layer" role="presentation" onClick={onClose}>
      <section
        id={id}
        className="workbench-dialog"
        role="dialog"
        aria-modal="true"
        aria-label={title}
        onClick={(event) => event.stopPropagation()}
      >
        <header className="workbench-dialog-head">
          <h2>{title}</h2>
          <button className="workbench-dialog-close" type="button" aria-label="关闭" onClick={onClose}>×</button>
        </header>
        <div className="workbench-dialog-content">{children}</div>
      </section>
    </div>
  );
}
