import { Layout, List, Input, Button } from 'antd';
import './Chat.css';

const { Sider, Content } = Layout;
const { TextArea } = Input;

const Chat = () => {
  const channels = ['Channel 1', 'Channel 2'];
  const messages = [
    { user: 'User 1', text: 'Hello!' },
    { user: 'User 2', text: 'Hi!' },
  ];

  return (
    <Layout className="chat-layout">
      <Sider theme="light" width={300} className="chat-sider">
        <List
          header={<div>Channels</div>}
          bordered
          dataSource={channels}
          renderItem={item => (
            <List.Item>
              {item}
            </List.Item>
          )}
        />
      </Sider>
      <Layout>
        <Content className="chat-content">
          <List
            itemLayout="horizontal"
            dataSource={messages}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  title={item.user}
                  description={item.text}
                />
              </List.Item>
            )}
          />
          <div className="chat-input">
            <TextArea rows={4} />
            <Button type="primary" className="chat-button">
              Send
            </Button>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
}

export default Chat;