import { Logo } from "../../components/Logo";
import { useWorkspace } from "../../workspaceStore";
export function EmptyState() {
  const setDialog = useWorkspace((s) => s.setDialog);
  return (
    <div className="grid min-h-0 flex-1 place-items-center">
      <div className="text-center">
        <div className="mb-3 opacity-80"><Logo size={56} /></div>
        <div className="ops-dim mb-1 text-sm font-semibold">OpsxAPI · 接口工作台</div>
        <div className="ops-faint mb-5 text-xs">
          从左侧选择接口，或
          <button className="ops-link mx-1" onClick={() => setDialog({ type: "import" })}>
            导入数据
          </button>
          /
          <button
            className="ops-link ml-1"
            onClick={() =>
              setDialog({ type: "new", collectionId: useWorkspace.getState().collections[0]?.id ?? "", parentId: null })
            }
          >
            新建请求
          </button>
        </div>
        <div className="ops-faint text-[11px] leading-6">
          HTTP · GraphQL · WebSocket · SSE · Socket.IO · MQTT
          <br />
          支持 OpenAPI / Postman / Apifox / cURL / HAR 等格式导入导出
        </div>
      </div>
    </div>
  );
}