import { useState } from 'react'
import { Tabs } from "@elvis/ui";
import ConvolutionVisualizer from "./ConvolutionVisualizer.tsx"
import NetworkVisualizer from "./NetworkVisualizer.tsx"

function App() {
  const tabs = ["Convolution", "Network"];
  const [activeTab, setActiveTab] = useState<string>(tabs[0]);

  return (
			<div className="grid grid-cols-[1fr_12fr_1fr] h-dvh bg-stone-50">
				<div/>

				<div className="flex flex-col min-h-0 p-6">
					<div className="title">CNN Visualizer</div>
          {/* <div className="desc"></div> */}

					<Tabs 
						tabs={tabs} 
						activeTab={activeTab} 
						onChange={setActiveTab}
					/>
					<div className="min-h-0 flex-1 overflow-auto mt-4">
						{ activeTab === "Convolution" && (
							<ConvolutionVisualizer />
						)}
						{ activeTab === "Network" && (
							<NetworkVisualizer />
						)}
					</div>
				</div>
			<div/>
		</div>
  );
}

export default App;