import React from 'react';
import { Layout as AntLayout } from 'antd';
import MenuComponent from './MenuComponent';
import { Outlet } from 'react-router-dom';

const { Sider, Content } = AntLayout;

const Layout: React.FC = () => {
  return (
    <AntLayout style={{ minHeight: '100vh' }}>
      <Sider width={200} style={{ background: '#fff' }}>
        <div className="logo" style={{ padding: '16px', textAlign: 'center', fontWeight: 'bold', fontSize: '18px' }}>
          Crawlful Hub
        </div>
        <MenuComponent />
      </Sider>
      <AntLayout>
        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
          <Outlet />
        </Content>
      </AntLayout>
    </AntLayout>
  );
};

export default Layout;