'use client';
"use client";

import { useState } from "react";

import FileExplorer from "../explorer/FileExplorer";
import CodeEditor from "../editor/CodeEditor";
import AIChatPanel from "../chat/AIChatPanel";
import TerminalPanel from "../terminal/TerminalPanel";
import AgentMonitor from "../dashboards/AgentMonitor";

export default function WorkspaceShell() {

const [left,setLeft]=useState(true);
const [right,setRight]=useState(true);
const [bottom,setBottom]=useState(true);

return (

<div className="workspace-shell">

<header className="workspace-header">

<div className="workspace-logo">
Traveler Dev
</div>

<div className="workspace-title">
Autonomous AI Workspace
</div>

<div className="workspace-actions">

<button>Preview</button>

<button>Build</button>

<button>Deploy</button>

<button>Settings</button>

</div>

</header>

<div className="workspace-body">

{left &&

<aside className="workspace-left">
<FileExplorer/>
</aside>

}

<main className="workspace-main">

<CodeEditor/>

</main>

{right &&

<aside className="workspace-right">

<AIChatPanel/>

<AgentMonitor/>

</aside>

}

</div>

{bottom &&

<footer className="workspace-terminal">

<TerminalPanel/>

</footer>

}

</div>

);

}