"use client";

import { useState } from "react";
import { ServerSidebar } from "./ServerSidebar";
import { ChannelSidebar } from "./ChannelSidebar";
import { ChatView } from "@/components/chat/ChatView";

export function AppLayout() {
  const [activeChannelId, setActiveChannelId] = useState("general");

  return (
    <div className="flex h-screen w-screen overflow-hidden">
      {/* Server sidebar - far left */}
      <ServerSidebar />

      {/* Channel sidebar */}
      <ChannelSidebar
        activeChannelId={activeChannelId}
        onChannelSelect={setActiveChannelId}
      />

      {/* Main chat area */}
      <div className="flex-1 flex flex-col min-w-0" style={{ backgroundColor: "#23272e" }}>
        <ChatView channelId={activeChannelId} />
      </div>
    </div>
  );
}
