import { ReactFlowProvider } from "@xyflow/react";
import "./App.css";
import { CanvasBuilder } from "./Canvas";
import { Tabs, TabsTrigger, TabsContent, TabsList } from "./components/ui/tabs";
import { Config } from "./Config";
import { Integrations } from "./Integrations";
import { Toaster } from "./components/ui/toaster";
import { Header } from "./Header";

export default function App() {
	return (
		<ReactFlowProvider>
			<Header />
			<AppImpl />
			<Toaster />
		</ReactFlowProvider>
	);
}

function AppImpl() {
	return (
		<Tabs defaultValue="canvas">
			<TabsList>
				<TabsTrigger value="canvas">Canvas</TabsTrigger>
				<TabsTrigger value="config">Config</TabsTrigger>
				<TabsTrigger value="integrations">Integrations</TabsTrigger>
			</TabsList>
			<TabsContent value="canvas">
				<CanvasBuilder />
			</TabsContent>
			<TabsContent value="config">
				<Config />
			</TabsContent>
			<TabsContent value="integrations">
				<Integrations />
			</TabsContent>
		</Tabs>
	);
}