import { useState } from 'react'
import { Layout } from 'antd'
import AppSider from './AppSider'
import AppHeader from './AppHeader'
import './MainLayout.css'

const { Content } = Layout

function MainLayout({ children }) {
  const [collapsed, setCollapsed] = useState(false)

  const toggleCollapsed = () => {
    setCollapsed(!collapsed)
  }

  return (
    <Layout className="main-layout" hasSider>
      <AppSider collapsed={collapsed} onToggle={toggleCollapsed} />
      <Layout className="main-content-wrapper">
        <AppHeader collapsed={collapsed} onToggle={toggleCollapsed} showLogo={false} />
        <Content className="main-content">
          <div className="content-wrapper">
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}

export default MainLayout