import { Resources } from "@/components/resources";
import { Canvas } from "@/components/canvas";
import { Details } from "@/components/details";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
import { Tools } from "./Tootls";

export function CanvasBuilder() {
	return (
		<ResizablePanelGroup direction="horizontal" style={{ width: "100vw", height: "calc(100vh - 100px)" }}>
			<ResizablePanel defaultSize={80}>
				<ResizablePanelGroup direction="vertical">
					<ResizablePanel defaultSize={80}>
						<ResizablePanelGroup direction="horizontal">
							<ResizablePanel defaultSize={15}>
								<Resources />
							</ResizablePanel>
							<ResizableHandle withHandle />
							<ResizablePanel defaultSize={85}>
								<Canvas />
							</ResizablePanel>
						</ResizablePanelGroup>
					</ResizablePanel>
					<ResizableHandle withHandle />
					<ResizablePanel defaultSize={20}>
						<Tools />
					</ResizablePanel>
				</ResizablePanelGroup>
			</ResizablePanel>
			<ResizableHandle withHandle />
			<ResizablePanel defaultSize={20}>
				<Details />
			</ResizablePanel>
		</ResizablePanelGroup>
	);
}