import { NodeRect } from "./node-rect";
import { nodeLabel, MongoDBNode } from "@/lib/state";
import { Handle, Position } from "@xyflow/react";
import { Name } from "./node-name";
import { NodeDetailsProps } from "@/lib/types";

export function NodeMongoDB(node: MongoDBNode) {
	const { id, selected } = node;
	return (
		<NodeRect id={id} selected={selected} type={node.type} state={node.data.state}>
			<div style={{ padding: "10px 20px" }}>
				{nodeLabel(node)}
				<Handle
					id="env_var"
					type={"source"}
					position={Position.Top}
					isConnectableStart={true}
					isConnectableEnd={true}
					isConnectable={true}
				/>
			</div>
		</NodeRect>
	);
}

export function NodeMongoDBDetails({ node, disabled, showName = true }: NodeDetailsProps<MongoDBNode>) {
	return showName ? <Name node={node} disabled={disabled} /> : null;
}