import { useStateStore } from "./lib/state";
import { generateDodoConfig } from "./lib/config";
import JSONView from "@microlink/react-json-view";

export function Config() {
	const store = useStateStore();
	return (
		<div className="h-full p-4 bg-muted rounded-lg overflow-auto">
			<JSONView
				src={generateDodoConfig(store.projectId, store.nodes, store.env) as object}
				theme="rjv-default"
				name={false}
				displayDataTypes={false}
				enableClipboard={true}
				style={{ fontFamily: "JetBrains Mono" }}
			/>
		</div>
	);
}