import { useState } from 'react'
import { Sidebar } from '../components/Sidebar'
import { MessagePane } from '../components/MessagePane'
import { FileBrowser } from '../components/FileBrowser'
import { useWaste } from '../store'

export function Chat() {
  const { activeFilePeer } = useWaste()
  const [sidebarOpen, setSidebarOpen] = useState(false)
  return (
    <div className={`chat-layout${activeFilePeer ? ' has-file-browser' : ''}${sidebarOpen ? ' sidebar-open' : ''}`}>
      <Sidebar onClose={() => setSidebarOpen(false)} />
      <MessagePane onMenuClick={() => setSidebarOpen(v => !v)} />
      {activeFilePeer && <FileBrowser />}
    </div>
  )
}