import React, { useState } from 'react';
import { Layout } from 'antd';
import { Outlet } from 'react-router-dom';
import AppSidebar from '../components/Sidebar/index';
import AppNavbar from '../components/Navbar';
import './layout.css';

const { Header, Sider, Content } = Layout;

const MainLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout className="main-layout">
      <Sider className="main-sider" trigger={null} collapsible collapsed={collapsed} width={260}>
        <div className="logo">
          <div className="logo-mark">pms</div>
          {!collapsed ? (
            <div className="logo-copy">
              <span className="logo-kicker">UNISSENSE PMS</span>
              <strong className="logo-title">新光线平台</strong>
            </div>
          ) : null}
        </div>
        <AppSidebar />
      </Sider>
      <Layout className="main-layout-body">
        <Header className="main-header">
          <AppNavbar collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
        </Header>
        <Content className="main-content">
          <div className="main-content-panel">
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default MainLayout;