'use client';

import { IconButton } from '@/components/ui/button';
import Input from './Input';
import MessageList from './MessageList';
import { useChatStore } from './store';
import Sider from './Sider';

export default function ChatPage() {
  const isSidebarOpen = useChatStore((store) => store.isSidebarOpen);
  const setIsSidebarOpen = useChatStore((store) => store.setIsSidebarOpen);

  return (
    <div className="flex h-full">
      <div className="relative px-4 w-full flex-1 flex justify-center">
        <div className="max-w-[752px] w-full h-full flex flex-col">
          <MessageList />
          <Input />
        </div>
        <IconButton
          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          className="absolute top-1 right-1"
          variant="ghost"
          size="small"
        >
          <i className="iconfont-v2 iconv2-zhedie" />
        </IconButton>
      </div>

      {isSidebarOpen && <Sider />}
    </div>
  );
}