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>
  );
}