// App.js

import React from 'react';
import { Layout, Menu } from 'antd';
// import './App.css';

const { Header, Sider, Content } = Layout;

function App() {
  const channels = ['General', 'Random'];
  const messages = [
    { user: 'User1', text: 'Hello!' },
    { user: 'User2', text: 'Hi!' },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={200}>
        <Menu mode="inline" style={{ height: '100%', borderRight: 0 }}>
          {channels.map(channel => (
            <Menu.Item key={channel}>{channel}</Menu.Item>
          ))}
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', padding: 0 }} />
        <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
          <div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
            {messages.map((message, index) => (
              <p key={index}>
                <strong>{message.user}</strong>: {message.text}
              </p>
            ))}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
}

export default App;