import React from 'react'
import VideoGrid from './VideoGrid'
import Sidebar from './Sidebar'
import ChatPanel from './ChatPanel'
import Roster from './Roster'
import ControlBar from './ControlBar'
import Header from './Header'
import LivekitConnector from './LivekitConnector'
import LowerThird from './LowerThird'

const StudioLayout: React.FC = () => {
  return (
    <div className="studio-layout">
      <div className="studio-header">
        <Header />
      </div>

      <div className="studio-main">
        <aside className="studio-sidebar">
          <Sidebar />
          <div style={{ marginTop: 'var(--au-spacing-4)' }}>
            <LivekitConnector />
          </div>
        </aside>

        <main className="studio-content">
          <VideoGrid />
        </main>

        <aside className="studio-right-panel">
          <Roster />
          <ChatPanel />
        </aside>
      </div>

      <div className="studio-control-bar">
        <ControlBar />
      </div>

      <LowerThird title="AvanzaCast Studio" subtitle="Produciendo" />
    </div>
  )
}

export default StudioLayout